Firebot Fx Title

Customizing Firebot Buttons: Adding Effects

 

Firebot Fx Title


 

If you've followed all the other Firebot guides up until this point, you should be ready to go with adding effects to your buttons. If you have yet to finish those steps, make sure to check the guides out prior to adding effects.

Hover your mouse over Button 1 and an 'Edit' option will appear in the upper right corner. Click this button.

 

Firebot interactive button

 


 

An Edit Button window will open up. Here is a run down of the settings:

 

Button Text: This is what is displayed on your Mixer interactive board. Just keep in mind that this will be overwritten by the button name in Mixer Developer Lab next time you save and sync. So if you want to change a button  name, I would recommend doing it directly in Mixer Developer Lab.

Tooltip: When a user hovers their mouse over the button, a text box will pop up displaying whatever text you enter here.

Sparks Cost: The cost, in Sparks, a user 'pays' to use the button. This will temporarily overwrite the sparks cost set in Mixer Developer Lab. This will also be overwritten by the by Mixer Developer Lab values next time you save and sync. If you want to permanently change the sparks cost, I would recommend doing it directly in Mixer Developer Lab.

Cooldown(secs): The buffer time required before this button can be used again. A countdown will be displayed on the button until the button is activated again.

Threshold: A unique option that I incorporate into my stream. This number will be the amount of times the button must be pressed before it is activated. This threshold will be shared across all users. 

 

Permission:

None: The default option. Every user will have the ability to activate this button.

Group: Allows you to select which Firebot group can activate this button.

Individual: Allows you to enter individual users who can activate this button.

 

Other:

Active Button: If unchecked, this will disable the button.

Show Chat in Feed: If checked, the activity will be displayed in the chat feed.

Skip Logging: If checked, this activity will not be logged in the moderation panel.

 

What should this button do?: This is where you add an effect to the button. 

Click the '+Add Effect' button to start customizing a specific effect.

 

Firebot button options

 


 

A window will open up. Click the first text box and it will open up a list of the available effects. Here is an image of all the effects as of version 4.10.5. Lots to choose from! In this tutorial we will focus on a simple GIF file. So select the 'Show Image' option.

 

firebot effects


 

A new window will open up. Click 'Choose File' and browse to your file location. Alternately, you can choose an online image by clicking the URL option then pasting in your image link.

 

firebot image edit effect

 

In my example, I created a folder within My Documents to keep all my Firebot media. Select a file and click 'Open'. We will be using a Game Over GIF for our example. If you have yet to build a GIF library then some quick Google images searches might be a good start or perhaps give Giphy a try.

 

Firebot file selection

 

Your GIF will now be associated with the button effect. Here is a quick run down of the available settings:

Overlay Display Location: This section will allow you to adjust your image location on screen by selecting preset quadrants, specific coordinates or even random preset locations. I will just leave it on the default center screen preset for this example.

Enter/Exit Animations: This section gives you a lot of choices to jazz up your image/GIF. The default fade in/out is decent, but feel free to experiment with other animation options.

Dimensions: If you leave this blank, your image will be displayed at its full resolution. You can reduce the size on screen by entering in custom dimensions.

Duration: Adjust the timing of how long your image displays on screen. This is a nice option that will allow you to shorten the display time of a long GIF.

The disclaimer at the bottom of the window is a reminder to link Firebot to your broadcast software. If you have still yet to do this, make sure to first link Firebot to OBS otherwise your images will not display on stream.

Click 'Add' when you are all happy with your settings. Don't worry, you can always come back later to make adjustments.

 

Firebot image edit effect

 


 

Under the 'What should this button do?' section you will now see the 'Show Image' effect that you created. You can always click on the effect if you ever need to edit it. You can also click the three vertical dots to the right if you ever want to duplicate, copy or delete this effect.

Click 'Save Changes' and the effect can now be triggered to display in your broadcast software, but lets go ahead and add the accompanying sound effect. Click the '+Add Effect' button again. 

 

Firebot image edit effect

 

This time in the Add New Effect window lets select 'Play Sound'

 

Firebot effects


 

A new sound effect selection window will open up. Click 'Choose' and lets browse for our file.

 

Firebot sound effect

 

In my example, lets browse back to the folder I created within My Documents where I keep all my Firebot media. Select the file and click 'Open'. We will be using a Game Over mp3 file for our example but Firebot will accept many audio file formats. You can build a sound fx library with some quick Google searches. Be creative!

 

Firebot file selection

 


 

Your mp3 file will be associated with the button effect. You can also adjust the volume of the sound clip along with the output device if need be.

Click 'Add' to finish up the sound effect.

 

Firebot sound effect

 

Your button will now be loaded up with both your image and sound effects and should be ready to test out. For good measure I added a 30 second cooldown to prevent spamming of the button. This tutorial just covers the basics of a simple GIF and sound fx combo. There are lots more you can experiment with. I plan on writing some additional guides for more Firebot effects so keep an eye out for those. 

Another nice effect worth mentioning is 'Cooldown - cooldown some buttons'. This effect comes in handy when you have multiple buttons and you want multiple buttons to go on cooldown together. Again, this is a great way to avoid spamming of buttons.

 

Firebot sound effect

 

The button is ready to go. Lets open up your broadcasting software, OBS in our case, and lets test it out! Just ensure your Firebot overlay is turned on and simply press the button via the Firebot interface. No need to go live and start streaming. You can also test the button directly on your Mixer channel, again without going live. If you want to test it this way, make sure your streamer and bot accounts are still logged in. Click the toggle connection button at the bottom left of the Firebot main screen. The four smaller icons in the bottom left should connect and turn green. You may get errors every now and then. Just try clicking the connection button again if this happens.

 

Firebot interface

 


 

As Firebot is connecting you will see a 'Connecting to Interactive...' message in your Mixer channel below your stream/offline window.

 

Connecting to Interactive

 

If all goes well, your interactive board will connect and turn on in your Mixer channel.

 

Pro Tip: Make sure your streaming account and your bot accounts are exempt from Sparks costs otherwise your Sparks will be debited every time you click the buttons. No need to lose your hard earned Sparks in your own channel! Go into Firebot - Moderation. Then under 'Spark Exemption' enter your streamer account name and click 'Exempt'. I would then do the same for your bot account name in case you are ever logged in as the bot and testing buttons.

 

Try pressing 'button 1' and it should activate within OBS. If you set a cooldown, a timer should also go off. Using these guides you can now go back and create additional button and effects. Have fun!

 

Mixer Interactives

 

 

 

 

Firebot Mixer buttons Title

Creating Interactive Buttons For Firebot

 

Firebot Mixer buttons Title


 

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.

  1. Click your avatar to the top right to open up your side menu.
  2. 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

mixer dev lab selection


 

 

Click the 'Build' tab.

 

mixer dev lab build

 

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.

 

mixer dev lab buttons

Some additional items will open up. 

  1. 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.
  2. There are multiple options in what button type you can make. This tutorial will cover a simple 'button' so click that option.
  3. Click the 'Add' button.

 

Mxer dev lab buttons

 

Your new button will appear in the control column. Click the arrow button to the right side to finish editing the properties.

 

mixer dev lab buttons

 

  1. 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'.
  2. 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.

mixer dev lab buttons

 

After you X out. You are all set. Congrats on creating your first Mixer Developer Lab button!

Repeat these steps to create additional buttons.

mixer dev lab 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.

 

Mixer Dev Lab buttons

adding interactive buttons to your Mixer page layout

 


 

  1. Head back to Firebot and click 'Change Board'
  2. 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.

Firebot 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.

Firebot buttons

 


 

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.

 

Firebot to OBS

Adding Firebot As An Overlay in OBS

Firebot to OBS

 

In order for your Firebot images or video files to show up on your live stream, you need to link Firebot to OBS as a Browser Source. This the final step in my guide to get your Firebot overlays up and running. Make to check out the other guides to ensure you have all the other steps complete:

  1. Link Firebot to Mixer Developer Lab
  2. Create Buttons in Mixer Developer Lab and connect to Firebot
  3. Connect Firebot to OBS so it displays as an overlay in your stream.

 

  1. Open up Firebot and go to 'Settings'
  2. Click the 'Overlay' tab
  3. Click the 'Get Overlay Path' button.

firebot overlay settings

 

A window will pop up with your link to connect Firebot to OBS. Click the 'Copy' button and click 'Okay' to close this window.

Make note of the warning box at the bottom of the window. A lot of streamers run into this issue when OBS is opened before Firebot when going live. Try and get in the habit of opening Firebot first so the source is refreshed and ready to go in OBS. Otherwise you will have to manually refresh in OBS to get your graphics to appear.

firebot overlay info

 


 

Head over to OBS

  1. Select your Scene that you want to display the graphics. Or create one if you have yet to set this up. In my example, I am picking my sample - Xbox scene.
  2. Under the 'Sources' column, click the '+' sign to add a new source.
  3. Select 'BrowserSource' from the list.

 

 

Add Firebot source to OBS

 


 

  1. Give this source a name. In this example we will name it 'Firebot'.
  2. Click 'OK'

 

obs firebot browsersource

 


 

In the properties window:

  1. Paste the Firebot Overlay File Path that you copied from Firebot.
  2. Fill in your streaming resolution Width and Height as this overlay will encompass the entire screen. In our case I will use 1280x720 since I am streaming at 720P resolution.
  3. Click 'OK'.

 

obs firebot browsersource

 


 

You will now have a red outline on screen which represents your newly created Firebot overlay. If the red box does not fill the entire screen, click one of the red corners and drag to fill the entire screen. It is a good idea to now lock the window so you do not accidentally move the source. Click the lock icon next to your source name.

 

OBS firebot browsersource

 

You are all set! Firebot is now linked to OBS and your graphics are ready to be triggered and displayed in OBS and on your stream. You can now customize your Firebot buttons.

 

Firebot Mixer

Linking Firebot With Your Mixer Channel

Firebot Mixer


 

 

Lets get Firebot all linked up with Mixer and allow all the required privileges to allow proper functionality. 

 

The first step is download and install the software

firebot

 


 

A prerequisite for using these bots is you will need two separate Mixer accounts: your main streamer account and your bot account so be sure to have both of these ready to go before setting up Firebot.

 

In the top right, you will see images which represent your two accounts.

Click the pull down arrow and go to 'Manage logins'

 

firebot opening screen

 


 

A new window will pop up. Continue logging into both your main streaming account and your newly created bot account. 

 

firebot login prompt

 

You will need two different Microsoft accounts for this. Proceed with signing in or creating the accounts.

 

Microsoft login window

 


 

You will get prompts regarding granting permission to Firebot. You'll notice the main streamer account will have more permissions to grant. Approve all the privilege pop up windows to allow Mixer to talk with Firebot and give you and your bot the rights to operate.  Don't worry...you only have to do this once.

 

mixer streamer permissions      mixer bot permissions

 


 

After you login and approve the permissions for both accounts, you should see your icons and account names. Great!

Close this window out and click the '+ Add First Board' button.

 

firebot login

 


 

A new window will pop up. The line of text basically outlines your next steps. Leave this open for now and head to your Mixer page in a web browser of your choice. I'll be using Microsoft Edge in this example.

 

 


 

Setting Up Your First Mixer Interactive Board

Head over to your Mixer channel page and make sure you are logged in as your streaming account and not your bot.

  1. Click your avatar to the top right to open up your side menu.
  2. Click on 'Dev Lab' at the bottom of the side menu.

 

Mixer developer lab menu

 


 

You will be switched over to the Mixer Developer Lab home page. If this is your first time setting this up, you will be greeted with an empty page. I have a few boards that I have up and running, but I'll create a new one for this example.

  1. Ensure you are on the 'Interactive Projects' tab.
  2. Click the '+' symbol.
  3. In the 'Create Project' Window, enter in a name for your board. In this example we will call ours 'test sound board'
  4. You will be required to assign a game to the project in this field before you can continue. Simply start typing 'other' then select it from the list that pops up.
  5. Click 'Save' to create your project.

 

Mixer developer lab home page

 


 

Your project should open up automatically. If not, just select it from your project list by selecting 'Editor'.

  1. Click the 'Code' tab.
  2. On this screen you will see a unique code that represents your  ID that you will link with Firebot for this soundboard. Keep in mind that you will need to repeat this step if you wish to create different sound boards in the future.
  3. Click the dev copy button (copy) button. 

You are all done with Mixer for this initial setup. 

 

Mixer dev lab version id

 


 

Head back to Firebot and you should still have the 'Add New Board' window open. If not, click the button again. 

  1. Control-V or click the  (paste) icon. Your code will be entered into the box.
  2. Click 'Add Board'

 

Firebot new board prompt

 


 

All Set! You've have successfully linked Firebot with Mixer. You should see the name of your default board now in Firebot as well as in the Mixer Developer Lab.

Firebot Mixer connected

 

The next step is to begin creating buttons in the Developer Lab, syncing and editing them within Firebot. This is the fun part!