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

Latest And Best Prime Day Deals

Amazon's Fire TV Cube is down to just $70 thanks to this Prime Day deal
Amazon Fire TV Cube
$69.99 $119.99 Save $50

Save $80 on the Neato D4 robot vacuum during this Prime Day Lightning deal
Neato Robotics D4 Alexa-enabled laser-guided robot vacuum cleaner
$319.99 $400.00 Save $80

Time is running out. And so is the supply. Grab it while you can.

Grab TCL's 32-inch 720p Roku TV for less than $100 in this Prime Day Lightning deal
TCL 32S325 32-inch 720p Roku TV
$99.99 $130.00 Save $30

Act fast while you can. These Lightning deals tend to sell out quick.

The Ring Alarm security system is reaching new low prices for Prime Day
Ring Alarm home security systems

Various configurations of the Ring Alarm are discounted to their best prices yet exclusively for Prime members at Amazon through Tuesday night to help keep your home secure.

The Sonos Beam Prime Day deal includes a $40 discount and 2 $50 Amazon gift cards
The Sonos Beam Prime Day deal includes a $40 discount and $100 in Amazon gift cards
$359.00 $499.00 Save $140

That's just so much savings in one deal. You'll have to wait for the physical gift cards, but that's basically $100 to spend however you want.

Prime Day dropped this PlayStation 4 console bundle to just $250
PlayStation 4 Slim 1TB console with Marvel's Spider-Man and Horizon Zero Dawn
$249.99 $359.98 Save $110

This deal on the PlayStation 4 Slim console saves you $50 off its regular price while also including Marvel's Spider-Man and Horizon Zero Dawn Complete Edition for free. You'll just need an Amazon Prime membership to snag it.

The newest device in the Echo family, the Show 5, is now down to just $50
Echo Show 5
$49.99 $89.99 Save $40

It's only been on the market since May, but it hasn't escaped the Prime Day price cuts.

Amp up your home security with these huge Prime Day discount on nearly all Ring products
Save on Ring products today only

Whether you need a video doorbell, whole home alarm system, or some lights to brighten a dark area, Amazon has it all marked down today!

More Prime Day Deals