How to add interactive GIFs, sounds, and more to your Mixer streams with Firebot

However, it can be unclear on exactly how to set up your own interactive buttons. In order to allow your viewers to spend their Mixer "sparks," the site currency, on things like in-stream sounds or GIFs, you need to leverage Mixer's Interactive Studio and SDK. Thankfully, there's a bunch of independently-developed systems to help you use Mixer Interactive, and today, we'll detail how to use the free and open-source Firebot tool to place buttons into your stream.

First, you're going to need to learn how to set up your stream using OBS or XSplit on a Windows PC. This will not work when streaming from Xbox One, because you need to use an .HTML overlay. For more information on how to set up, see the link below.

How to stream on Mixer using OBS or XSplit

How to set up interactive buttons for Mixer streams

First, we're going to get started with Mixer Interactive Studio and set up a button or two for testing.

1. Log in to your Mixer.com account, and then click your avatar in the top-right corner.
2. In the new menu, click the studio button at the bottom.

3. In the Studio section, it should say "You have no Projects yet." Click on Let's create one.
4. Here, you can give your Project a name, a description, and even a logo. Only the name is really required.
5. In the top menu, select Build and you should see the button layout interface.

6. Select the + under the Controls column.
7. Name your button, then click add.
8. Now, using your mouse drag your new button into the blue grid on the right side of the screen.
   • Note: The grid positioning is how your button will display on the web. It can be a little awkward to position buttons by dragging. Resizing and shrinking to move them around seems to work best in Microsoft Edge.
9. Next, click on the arrow on your control to give it a display name, and a spark cost. This will tell the Firebot application how many Mixer sparks to charge a user for pressing the button. You can alter this later using Firebot.

10. Once you are done, hit save in the top right corner. You can add as many buttons as you want, but for the purposes of this guide, we're going to start with one.
11. Finally, go to the code section at the top, and make a note of the number it gives you. This is how you'll tie your button into the Firebot application in the next section.

Go get Firebot

Now you will need to download Firebot. Firebot is a program for Mixer Interactive that allows you to set up custom buttons and output them to an XSplit or OBS .HTML overlay. We'll get into how to set up the overlay later, but for now, head over to the link below and download Firebot for Windows PC.

Download Firebot for Windows PC

1. Download the latest version of Firebot and extract the contents of the folder to an easily accessed location on your computer.
2. Double-click the Firebot.exe application.
3. Windows Defender might pop up and give you a warning about installing unknown applications. Click More Info then select Run Anyway to circumvent this.
4. Windows Firewall might also pop up, and if so make sure to click allow access.
5. Next, click log in with your main Mixer broadcaster account on the left.

6. Once you are logged in, go back to Firebot and select Buttons at the top.
7. Click on change board then add new board.
8. Enter the code from Step No. 11 in the above section. (It's the unique identifier for your button layout we created earlier in Mixer Studio.)
9. Your "default" scene should now be available. Click on default to see the buttons you created earlier in the above section.
10. You should now see the button you made previously. Click on the edit symbol in the top-right corner of the button.

11. This is where you add effects to the button. It's a good idea to add a cooldown timer on each button, preventing it from being pressed again for x seconds. This is so people can't spam click it.
12. Click on Add effect then Pick effect to see all the different types of things you can do to the button. We're going to select show image for this tutorial, but you're limited only by your creativity here.

13. Once you have chosen the effects you desire (and you can add multiple effects per button), hit save changes.

Next, we're going to look at how to set up the overlay, so people can see the effects of your button.

Set up the Firebot overlay

Overlays are basically transparent web pages that people use to show GIFs, information, and logos on top of their streams. You can do this using either XSplit or OBS, but we'll focus on the free OBS for this guide. The XSplit steps are very similar. Remember to hit the link below for more information on how to stream to Mixer using OBS or XSplit.

How to stream on Mixer using OBS or XSplit

1. Open OBS and note the Sources section at the bottom.
2. Click on the + symbol, then select Browser Source.
3. Give the source a name if you wish, and then click OK.
4. Check the box for local source, and then click browse next to Local file.
5. In Firebot, you can get the link for your overlay in the settings menu under settings, and then overlay.

6. For the width and height, match it to your streaming resolution. If you stream at 1080p, select a 1920 width and a 1080 height. (I stream at 720p, so I'm using 1280 by 720.)
7. Make sure you drag the red outline of your browser source all the way to the edge of your preview window. (Sometimes the overlays don't work properly if they aren't full sized.)

8. You should now be ready to go live with your shiny new interactive button!

Going live

1. Go back to Firebot and click on the button at the bottom that looks like a red power button. This will set your Interactive buttons live on your stream channel. If it works, the button will go green as shown here.

2. Once you go live, you should now see the interactive buttons you set up, and if you followed all of the steps correctly, it should work as expected!

3. When you're done, you can simply close Firebot or hit the connect button to disable your interactive panel.

Wrapping up

Using Firebot and Mixer Interactive, you can add all sorts of things from sound effects, scene changes, and different buttons. You can also make exclusive subscriber-only buttons, and send chat messages. This guide is intended to cover the basics, so be sure to go forth and experiment more deeply with Firebot's features and systems.

Firebot is an amazing tool created by Firebottle, which is also a Mixer streamer. Consider contributing to the project on Github, or following or subscribing to Firebottle on Mixer.

Follow Windows Central on Mixer.com