Let the fun begin! Now that the hard part is over and you've linked your Firebot and Mixer accounts, you've got the freedom to use your creativity and create some interactive buttons that your viewers can have fun with. If you have not done this step yet, make sure to check out this guide to get you setup.
Head back to your Mixer Developer Lab home page. Again, make sure you are always logged in as your streaming account and not your bot.
- Click your avatar to the top right to open up your side menu.
- Click on 'Dev Lab' at the bottom of the side menu.
Your newly created project from this guide should now be listed. In our example, we named it 'test sound board'. I've got a few more boards listed as this is my live streaming account.
Click the 'Editor' button
Click the 'Build' tab.
Welcome to your interactive board build screen. This is where you will create and layout button with basic properties.
- The 'Scenes' give you the flexability to have different layouts within the same board. I use this by creating mod and subscriber boards.
- The 'Controls' section is where you populate your buttons.
- The 'Grid' section is the actual layout that you will see on your Mixer channel when your board is enabled.
- The save button to the right is also important. Make sure to save often.
Lets create a button by clicking the '+' sign in the controls column.
Some additional items will open up.
- Enter your button name here. In this example, this will be called 'button 1'. This is not the name that appears on your soundboard though. You get to set that name in the next step.
- There are multiple options in what button type you can make. This tutorial will cover a simple 'button' so click that option.
- Click the 'Add' button.
Your new button will appear in the control column. Click the arrow button to the right side to finish editing the properties.
- Fill in the display name of your button in the 'Text*' box. This is the actual name that shows up on your sound board. I will just keep things simple and use the same name and the button name, 'button 1'.
- Fill in your sparks cost. Keep in mind that this can be overwritten in Firebot, but every time your resync your to Dev Lab, it will reset to the sparks cost set here so its best to get that number to your liking now. Or change it here rather than in Firebot.
There are a few more items here that you can customize and I will go over these in a future post, but we will stick to the basics for now.
Click the 'X' in the button to finish up.
After you X out. You are all set. Congrats on creating your first Mixer Developer Lab button!
Repeat these steps to create additional buttons.
The next step is placing your buttons on your Grid layout. This layout represents the layout on your Mixer page. I went ahead and created two additional button for this example. Simply click and drag the button onto the Grid. You can then rearrange and click and drag the sides to adjust size. Click 'Save' When you are happy with your layout.
To the right side you will also notice three icons which represent phone (small grid), tablet (medium grid) and desktop (large grid). This will allow you to create separate arrangements for each specific device. I would recommend coming back and creating layouts for each to ensure all your viewers will have a good experience using your interactives, regardless of what device they are using.
- Head back to Firebot and click 'Change Board'
- Click 'Resync Board'.
Alternately, Firebot resync's when you open the program up. So opening it up for the first time will also work to resync.
This should load up the Mixer Developer Lab changes and you will now see your three new buttons (or however many you created). Don't forget that the layout and quantity of buttons will be handled via your Mixer Developer Lab. Save the changes there then resync in Firebot. This will need to be done every time you make a change.
Buttons can now be individually edited within Firebot to trigger sounds, images, videos, commands, etc. Make sure that you've already linked Firebot with OBS as a browser source. This step only needs to be completed once.