Skip to main content

StreamElements

We currently provide adapters for all the platforms supported by the third-party service called StreamElements; namely Facebook, Trovo, Twitch and YouTube. Below you will find the correct installation instructions.

info

StreamElements implements multiple platforms but offers no way to combine their events. The service architecture is designed to manage only one platform at a time, so this is where we come in to add multistreaming support!

Dock​

Start by copying the following URL to add it as a custom browser dock in your OBS installation. This URL is configured to use our theme similar to the activity feed offered by StreamElements but you can of course choose another one.

https://obs.multistream.tools/v1/dock?theme=./themes/streamelements/dock.css

Go to your StreamElements account to link as many platforms (channels) as necessary. Then use the selector at the top left of the site to choose one by one the platforms to modify and follow the corresponding instructions below.

Facebook​

Go to the Overlays tab in the Streaming tools category of the menu on the left of the site then click on the button named NEW OVERLAY at the top left of the screen. A new page will open and you will be asked to choose the resolution of your overlay; this does not matter, just click on the START button.

At the top left you can optionally give a name to your overlay, it is called Unnamed overlay by default, we invite you to change to multistream.tools Facebook Adapter v1 in order to better be able to identify it later if necessary.

warning

A StreamElements overlay should not be confused with a Multistream Tools overlay. The first one is not multiplatform and is used here only as an integration for our adapters.

Now click on the ADD WIDGET button on the left of the screen and then on the Custom widget button located under the STATIC / CUSTOM category in the newly opened menu.

Make sure that the rectangle, just added to the top left of the gray area in the center of the screen, is selected then click on the OPEN EDITOR button displayed at the top of the properties panel to the left of the gray area.

In the code editor which has just opened, completely replace the content of the different tabs with the code listed below, delete that of the others (CSS and JS) then click on the DONE button at the bottom right to validate.

<script type="module">
  import {
    FacebookStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    follower,
    fan,
    videoLike,
    supporter,
    share,
    stars,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new FacebookStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [follower]: {{follower}},
    [fan]: {{fan}},
    [videoLike]: {{videoLike}},
    [supporter]: {{supporter}},
    [share]: {{share}},
    [stars]: {{stars}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>
tip

If you expand the Events and Alerts sections that just appeared below the OPEN EDITOR button in the properties panel, you will be able to choose to activate and deactivate the events and alerts of your choice for this platform. This is useful, among other things, if your audience is large and you want to avoid playing sounds too frequently in your overlays; popular streamers often completely disable follower type alerts, for example.

Don't forget to save your work by clicking on the SAVE button at the top right of the site.

Now click on the button, representing a link, located directly to the left of the PREVIEW button; the Copied to clipboard! message should temporarily appear at the bottom right of the page indicating that the adapter link has been copied to your clipboard.

tip

The button named EMULATE, located at the bottom right of the gray area, allows you to simulate alerts. You can use it once the installation is complete to test that they appear correctly in our activity feed.

Now go to your OBS installation to add this link in the Settings tab of our dock. You can add the tag #facebook at the end of the URL to better distinguish this adapter from others later.

Finally click on the Save/Reload button then go to the Activity feed tab; the Mute, Pause and Skip buttons should become active after a short while, if not please repeat the installation steps.

Congratulations, you have just installed your first Multistream Tools adapter!

Trovo​

warning

Support for the Trovo platform by StreamElements is currently not fully operational. There are some significant issues with chat, which is why we chose to completely disable this event category by default and advise you to leave it that way for now. This is unfortunately not our responsibility.

The procedure to follow remains the same as for the Facebook platform. Only the content of the tabs below, the optional name of the overlay (multistream.tools Trovo Adapter v1) and the label at the end of the URL (#trovo) change.

Make sure you have selected the Trovo platform in StreamElements.

<script type="module">
  import {
    TrovoStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    follower,
    raid,
    subscriber,
    elixir,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new TrovoStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [follower]: {{follower}},
    [raid]: {{raid}},
    [subscriber]: {{subscriber}},
    [elixir]: {{elixir}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>

Twitch​

The procedure to follow remains the same as for the Facebook platform. Only the content of the tabs below, the optional name of the overlay (multistream.tools Twitch Adapter v1) and the label at the end of the URL (#twitch) change.

Make sure you have selected the Twitch channel in StreamElements.

<script type="module">
  import {
    TwitchStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    subscriber,
    cheer,
    follower,
    raid,
    reward,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new TwitchStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [subscriber]: {{subscriber}},
    [cheer]: {{cheer}},
    [follower]: {{follower}},
    [raid]: {{raid}},
    [reward]: {{reward}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>
info

StreamElements does not currently handle reward events (channel points), so we added their support directly using the PubSub Twitch API; be careful to only enable these events when necessary.

YouTube​

The procedure to follow remains the same as for the Facebook platform. Only the content of the tabs below, the optional name of the overlay (multistream.tools YouTube Adapter v1) and the label at the end of the URL (#youtube) change.

Make sure you have selected the channel YouTube in StreamElements.

<script type="module">
  import {
    YouTubeStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    sponsor,
    superChat,
    subscriber,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new YouTubeStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [sponsor]: {{sponsor}},
    [superChat]: {{superChat}},
    [subscriber]: {{subscriber}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>