Skip to main content

Overlays

Overlays, such as described previously, are distributed as HTML pages served over HTTPS. They are displayed using our wrapper and use our JavaScript and CSS frameworks to receive (observe) and send (emit) events as well as use the OBS JavaScript API.

An overlay can for example display chat messages and alerts while playing sounds, etc. The possibilities offered are endless, which will allow you to give free rein to your imagination to offer your spectators the unique experience that suits you!

Parameters​

namevalueoptional
langUser interface language (detected by default)yes
themeLocal, remote, or data URLyes
fontsGoogle Fonts query, without ?family=, or falseyes
zoomPercentage (1, meaning 100%, by default)yes
queueDurationNumber of seconds (10 by default)yes
antiSpamDeltaNumber of seconds (1 by default)yes
antiSpamThresholdNumber of events (3 by default)yes
volumePercentage (1, meaning 100%, by default)yes

The optional parameter named lang allows you to modify the overlay user interface language. It is automatically detected to match the setting of your OBS installation but you can use this parameter to force the language of your choice. The currently supported values are en (English) and fr (French).

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?lang=en

Just like our dock, the style of overlays can be modified on the fly thanks to the functionality of theme via the optional parameter named theme.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?theme=https://your-domain.com/theme.css
warning

The Custom CSS attribute of an OBS browser source will have no effect on our wrapper or on the overlay associated with it; this for technical and security reasons.

If you just want to customize the fonts of a given overlay, writing a theme is not necessary, just use the optional parameter named fonts to load them via the Google Fonts API.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue
warning

The value of the Google Fonts API family parameter must always come first and the value of the display parameter is swap by default.

It is important to redefine the same number of Google Fonts as those declared by a given overlay, as well as in the same order; we invite you to consult its documentation on this subject.

In case you want to pass several parameters to the Google Fonts API, it is important to encode (%2526) each & character separating them; we will therefore write:

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue%2526display=auto

Instead of:

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue&display=auto

You can also completely disable the use of Google Fonts by passing the value false.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=false

When you use a given overlay and judge that its display should be adjusted, there is also no need to create a theme, you can simply use the optional parameter named zoom dedicated to this purpose.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?zoom=1.5

If an overlay uses the Queue class exposed by our JavaScript framework, the optional parameter named queueDuration allows you to modify the default duration value of all created instances.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?queueDuration=20

If an overlay uses the AntiSpam class exposed by our JavaScript framework, the optional parameters named antiSpamDelta and antiSpamThreshold allow respectively to modify the default delta and threshold values ​​of all created instances. These two parameters are independent.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?antiSpamDelta=5
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?antiSpamThreshold=10

If an overlay uses the Sound class exposed by our JavaScript framework, the optional parameter named volume allows you to modify the default volume value of all created instances.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?volume=0.5
tip

Your overlays can also handle their own parameters, just give them names that do not conflict with those that are part of the system.

danger

By nature (query string), all parameters are sent to our servers. So never pass sensitive data (usernames, passwords, etc.) this way.

For a practical example, go to our page dedicated to overlay development.

Ready-to-use overlays​

We provide the following overlays, ready-to-use and customizable. These are open source and can therefore also be used as examples for creating your own overlays.