Search code examples
javascripthtmlcsswidgetstreaming

Creating widgets for twitch streamers

I came about these widgets (such as chatboxes, follower goals etc.) when I tried streaming and I really want to try to make my own version.

The main example I want to bring out is the streamlabs widgets. You can customise the HTML/CSS/JS on within the dashboard and to show it on your stream, all you need is a link that points to your widget.

My main question is how does one go about making such widgets. Here is what I think happens (roughly):

  • There is a database that stores all of the widgets and for each widget its HTML/CSS/JS is stored.
  • The link contains the unique DB ID of the specific widget. The link points to an API call on the streamlabs website that sends renders the widget and sends it to the browser source in the streaming software.

Another question I had was "How do messages get loaded into the chatbox".

When you edit a widget on the streamlabs website, the widget disappears for about 1-2s but when new messages pop-up, that doesn't happen. Why?

I know this is a lot but help a noob out. Thanks!

Solution

  • My main question is how does one go about making such widgets

    First of all these widgets are just websites rendered in a streaming software browser plugin/browser overlay. So you can use all things you are using in website dev. Your thoughts are not far from a real implementation.

    • There is the MAIN SERVER(with DB) which stores widget settings.
    • Streamlabs website connects to the MAIN SERVER and renders a page with settings.
    • Widget also connects to the MAIN SERVER, loads data by id from widget url(some user info, widget settings etc), and does initialization.
    • User changes some settings on the streamlabs site, it sends to the MAIN SERVER, it saves and notifies widget to do someting with new data.

    Simple implementation is a Nodejs web server with WebSockets, for instance, and a widget is a web page which connects via WebSocket to your server.

    Another question I had was "How do messages get loaded into the chatbox".

    Messages are loaded in the same way they loaded in the twitch site, you open a page, it connects to Twitch chat api and listen to new messages(btw there is a good js lib https://github.com/tmijs/tmi.js).

    When you edit a widget on the streamlabs website, the widget disappears for about 1-2s

    Yeah, its because the streamlabs chat widget just reloads himself when some settings was changed (to re-inizialize widget with new parameters, load new styles etc). As for messages, it doesn't need to reload page, widget just insert a new message into the current "page".