Skip to content

Singular.App Output URL

Introduction

Singular creates an output URL for every Singular App Instance. All graphics triggered from the Singular App are rendered as HTML graphics to this URL. The output URL can be added to another source, like as an iFrame to a web page, for instance.

Where can you find the Singular App Output URL?

Every instance of a Singular App has one specific output URL associated. Open your Singular App and click on the “monitor icon” on the top right. Use the UI to configure the output options or just enter the options in the URL.

How to integrate the Singular App Output URL?

Singular can create full screen graphics, sidebars, tickers and transparent overlays. The output URL can be integrated into you web environment as: - Singular Fullscreen Graphics iFrame or webview - Singular Side Panel Graphics iFrame or webview - Singular Tickers iFrame or webview - Singular Overlay Graphics iFrame or webview to e.g. video players in your web page.

Singular Fullscreen Graphics as iFrame

Embed the Singular output URL into a web page using the following HTML code:

1
2
3
4
5
6
<html>
...
<iframe src="http://app.singular.live/appinstances/7038/outputs/Output/onair?aspect=16:9" allowfullscreen="true" allowtransparency="true">
</iframe>
...
</html>

Example:

See the Pen Output URL as <iFrame&rt; (fullscreen) by Singular.live (@Singular) on CodePen.

View this example on Codepen.io.

Singular Sidepanel Graphics as iFrame

Embed the Singular output URL into a web page using the following HTML code:

1
2
3
4
5
6
<html>
...
<iframe src="http://app.singular.live/appinstances/7039/outputs/Output/onair?aspect=16:9" allowfullscreen="true" allowtransparency="true">
</iframe>
...
</html>

Example:

See the Pen Output URL as <iFrame&rt; (sidepanel) by Singular.live (@Singular) on CodePen.

View this example on Codepen.io.

Singular Fullscreen Overlays as iFrames to YouTube Player

Use Singular transparent Overlay Graphics to show graphics on top of a video or web source, such as a local embedded video player.

1
2
3
4
5
<html>
...
<iframe src="https://player.twitch.tv/?channel=dotatv247" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
<iframe src="http://app.singular.live/appinstances/7041/outputs/Output/onair?aspect=16:9" allowfullscreen="true" allowtransparency="true" scrolling="no" height="378" width="620"></iframe>...
</html>

Example:

See the Pen Output URL as <iFrame&rt; (overlay) by Singular.live (@Singular) on CodePen.

View this example on Codepen.io.

Where can I find more information?

For further information use following links:

If you have further questions contact dev@singular.live or support@singular.live