Skip to content

Getting Started

Firebottle edited this page Feb 20, 2017 · 30 revisions

Getting Started

Introduction

Firebot is an app that is focused on providing Beam.pro users with a large variety of interactive options. While there are apps out there that focus on a specific area, this app is a jack-of-all-trades type of app. This means that it offers a bit of everything, but does not dive to deep into any one thing.

Opening the App

To get started, simply visit the releases page and download the zip file for the newest version. In general, Beta versions are still in testing and may have bugs, while full releases are stable releases.

Once downloaded, you'll simply need to unzip it into whatever directory you'd like to keep Firebot in. I also recommend creating a shortcut of Firebot.exe and placing it on your desktop for easy use.

Logging In

Once you've opened Firebot you'll want to hit the Get Started button to open the main menu. Here you'll see a "Login" link. Click that to open up the login page where you'll be presented with two options, Streamer and Bot.

At minimum you will need to login with your streaming account, but if you have a separate bot account you'll have more interactive options available to you.

Just click the login button to begin the process of logging into the app.

Please note that the app does not store or have access to your username, password, or 2factor code. None of that is stored. This app uses OAuth to safely log you into the app without revealing any type of personal information. What that said, never share your user-settings/auth.json file with other people. This will allow them to run interactive on your channel.

Once your profile picture shows and name shows up on the page, you're logged in and ready to go!

Beam Dev Lab

Creating a New Interactive Board in the Dev Lab

The first step to creating an interactive board is building it in the dev lab. Doing this allows you to customize all of the button names, spark costs, and placement. To find this area, just log into beam and visit this link.

Once you're at the dev lab, just hit the big plus button next to "My Games" to create a new board. Give your new board a name and hit save. You'll see your new board appear on the page. Hit the bright blue "Control Editor" button next to your game to start editing that board.

Editing an Interactive Board in the Dev Lab

The page to edit your interactive board is divided into two major parts. The left side shows several different size grids. These are your interactive boards at desktop, tablet, and mobile sizes. The right side shows the controls you currently have ready for this board.

Adding a button to your board is fairly straightforward. On the right side you'll want to hit the blue "New" link next to the "Buttons" paragraph. This will add in a new entry for button #0 that says "not placed". Click the down arrow on this line to open up the detailed settings for this button.

You have several options presented now. "Holding" means that this button can be held down. This is used for things like movement keys in games. "Press Frequency" means that this button will just be pressed like a key tap. 95% of your buttons will simply need Press Frequency checked. You'll never have both of these checked at the same time while using Firebot.

Now, with one of those checked, scroll down to the data area. "Keyboard Trigger" is the button that users can press on their keyboard to trigger this button. Useful for things like game controls. "Button Text" is what shows on the actual button to users. "Help Text" is what shows when someone hovers over the button. "Spark Cost" is how much this button will cost people to click. "Cooldown" is how long this button will cooldown"

None of these fields are required, but I recommend Button Text at minimum so people know what they're clicking.

Once you have the button settings set, you can drag this button from the right side onto the left side grid. Just click and drag the entry from the right to the left. Congrats! The button is now on your board. Resize and arrange how you want, and then repeat this process until you're happy with your buttons.

Loading Buttons into Firebot

Creating a New Board

Now, with your interactive board created in the dev lab it is time to get Firebot ready. The first thing you want to do is navigate to the "Boards" tab in Firebot.

Once there, look for the "actions" dropdown in the upper right side of the app. Then hit the new board button. You'll be asked to enter a name for your board, and then hit save.

That's it! You now have a new board to start working with. Later on you can create more boards and swap between them as needed.

Importing Dev Lab Settings

The quickest way to get started from a blank board is to import your board settings from the Beam Dev Lab.

You can do this buy going to your board in the dev lab, as if you were going to edit it. In the top right you'll see a "View JSON" link. Click that to open a popup window. Scroll to the very bottom of the popup window and hit the "Copy to Clipboard" button.

Next, go back to Firebot and hit the actions dropdown. Click the "Import" option. This will open up a menu where you can paste in all of the JSON you just copied. Hit the save button and watch as your board is populated with all of your new buttons.

Editing Buttons in Firebot

The next step is going through each of these buttons and telling Firebot what you'd like it to do when each of these buttons is clicked. Above each button you'll see a small edit pencil icon. Click that to open up the settings for that specific button.

Once the settings are open you'll see some fields are already populated. These don't need to be changed. However, you'll want to set the button type and cooldown entries. Depending on the button type selected you'll be given additional options.

Repeat the edit process for each button until Firebot knows what you'd like to do with each of them.

Optional Image and Sound Attachment

Firebot allows you to attach image popups and sounds to any button you create. However, this is 100% optional. If you'd like to use it simply click the "attach media" option on the button you'd like to apply these options to.

For image popups, you'll need to load a Firebot.html overlay into OBS/Xsplit. This can be found in the Overlay folder of Firebot.

Optional Cooldown Groups

Firebot has a unique option that allows you to group multiple buttons together so that if any of them are clicked they will all cooldown for the same amount of time. This is called a "cooldown group" and can be added by using the "actions" menu and clicking "add cooldown group".

Once added you'll see a new section on the board page. You can can drag and buttons you want into this new section to group them together. Once grouped, the buttons no longer follow their individual cooldowns, but will instead follow the cooldown of the group. All buttons in the group will go on cooldown together.

To edit the cooldown for the group, click the edit pencil in the top left of the cooldown section.

Launching Interactive

Applying a Board to your Beam Page

The first step to launching interactive is telling Beam which board you'd like to launch. You can do this by going to your Beam page and clicking the "Go Interactive" button. This will open up a popup menu with several games listed. Select the one you built and hit start game!

Once done your Beam page will show the name of the game below your stream window and it should say "waiting for app to connect". That app, of course, is Firebot!

Starting Firebot

If all has gone well, you should now have a board in the dev lab that matches the board located in Firebot. They should have the same number of buttons and the button ID numbers will match up.

You can start interactive in one of three ways.

  1. Go to the actions menu and hit Launch Interactive.
  2. Click the red "interactive" status indicator in the top right of Firebot
  3. Press Control+Alt+F12. This is the global hotkey to start or stop interactive and it works even from within a game.

If everything is good, this should change the status indicators to green and your buttons should show up on your Beam page. If not, you should get errors that tell you what is wrong.

Global Interactive Toggle

Firebot has a global hotkey built in so that you can toggle interactive on or off as needed, even from within a game. Simply press Control+Alt+F12 toggle this on or off.

Clone this wiki locally