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
name | value | optional |
---|---|---|
lang | User interface language (detected by default) | yes |
theme | Local, remote, or data URL | yes |
fonts | Google Fonts query, without ?family= , or false | yes |
zoom | Percentage (1 , meaning 100%, by default) | yes |
queueDuration | Number of seconds (10 by default) | yes |
antiSpamDelta | Number of seconds (1 by default) | yes |
antiSpamThreshold | Number of events (3 by default) | yes |
volume | Percentage (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
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
The value of the Google Fonts API family
parameter must always come first and the value of the display
parameter is block
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
Your overlays can also handle their own parameters, just give them names that do not conflict with those that are part of the system.
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.
Configurator
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.
📄️ Alerts
This overlay/dock is used to display multiplatform alerts to viewers. These alerts can have custom messages, images, and sounds.
📄️ Chat
This overlay/dock is used to display a multiplatform chat, either for the spectators or for the streamer.
📄️ Featured
This overlay, intended to be integrated into your OBS installation in the form of a browser source, goes hand in hand with the dock of our Chat overlay and allows you to highlight the chat messages of your choice on your stream. For example, during a frequently asked questions (FAQ) or an interview, your viewers will be able to more easily identify the topic being discussed.
📄️ Polls
This overlay/dock is used to display and administer multiplatform surveys.