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.

 

Scorpbot Alerts Title

Adding An Interactive Board [Scorpbot]

Scorpbot Alerts Title


 

SCORPBOT SFX VIA INTERACTIVE BOARD An interactive board can be a way to keep viewers occupied and give them more opportunities to interact with you as you stream. Sparks cost and cooldowns can be adjusted for each button so you can customize things to your liking. This will also help minimize the spamming of your interactive buttons. Here is a step by step to get the board up and running on Scorpbot. Make sure you've already setup some sounds and / or graphics and also added Scorpbot as a source in OBS.  

  1. Head over to the 'Interactive' tab.
  2. Input the name that you would like displayed on the button.
  3. Enter your desired cooldown time in seconds before the button can be pressed again.
  4. Enter your desired sparks cost per button press.
  5. This is your syntax to activate the command. It must be typed correct in order to work: $sfx(filename). In our example the 'Game Over' file name is entered minus the file extension, which is not needed. Change this accordingly to whatever your filename is.
  6. Ensure that the two checkboxes are ticked.
  7. I recommend clicking the 'Free for Caster' checkbox. This ensures that no sparks are deducted from your total when you press the button. This helps for testing purposes, but is also nice to keep on all the time.
  8. Once all this is set, click the 'Create' button.
  9. A new button will appear based on the size in the options. To modify the size or move the button around, uncheck 'Visible' and click 'Update. Just make sure to make it visible again and update when you are happy with the size and location.

    Rinse and repeat to add additional buttons. If you would like to create a button that displays graphics, head over to the GFX tutorials( under construction). To enable to buttons on stream, click the Connect button. To disable just click the Disconnect button. Make sure you've linked your bot and streamer accounts first otherwise this will not work.