Step by step tutorial

So you have discovered LioranBoard… I can only say: Welcome to the world of endless possibilities!

We will walk you through a step by step tutorial on how to set up LioranBoard, and connect it to OBS and your Twitch account. You will also learn how to create your first button, add a command and trigger it via Twitch chat.

1. Install all dependencies #

  • Download and install OBS Studio. As of now, LioranBoard does not support other streaming software.
  • Download and install OBS Websocket (4.X) This is how LioranBoard communicates with OBS Studio. Please note that LioranBoard is not compatible with OBSWS 5.0 and up.

2. Download LioranBoard #

Unpack the zip file and place the folder anywhere in your computer, preferably in your non windows drive.

3. Launch LioranBoard Receiver #

Navigate to lioran/LioranBoard Receiver(PC) folder and launch LioranBoard Receiver.exe (‘Receiver’).
Allow the app through the firewall if there’s a prompt and slowly work your way through the onscreen built-in tutorial.
There is much to learn, take your time to read everything carefully and do not skip any of the parts, as they are all essential to using LioranBoard.

LioranBoard Receiver
LioranBoard Receiver

4. Connect Receiver to your OBS #

  1. In your OBS go to Tools-Websocket Server Settings. Uncheck ‘Enable authorization’ (for easy setup, you can change it later) and press OK.

    OBS Websocket Settings
    OBS Websocket Settings
  1. In your Receiver main menu press Connect to OBS button. It will grey out and you will see 3 yellow notification messages at the bottom of your Receiver. That means OBS is connected!

    OBS Websocket Connection Messages
    OBS Websocket Connection Messages

5. Add Transmitter to your OBS Dock #

In your OBS menu navigate to View - Docks - Custom Browser Docks. Your new dock name can be Transmitter and the URL will be the path to the tsl_transmitter.html file located in your lioranboard folder.
Press apply and you should see your new dock. If it does not pop up for some reason, you can always press View - Docks - Transmitter.
Fit your new dock somewhere in your OBS screen as you see fit.

OBS Dock Settings
OBS Dock Settings

Inside the dock you should see Connected or svg image next to Receiver. This means it is connected to your Receiver and listening for messages.

Transmitter Dock added to OBS
Transmitter Dock added to OBS

6. Link your Twitch account #

Linking your Twitch account to LioranBoard is a necessary step if you want to be able to listen to alerts and control your Twitch via LioranBoard.
You can link multiple Twitch accounts, however in this tutorial we will focus on connecting your main account.

  1. In your Receiver click on Link your Twitch button. A new menu will pop up and you will see a bunch of options to check and select between main and alternate accounts. Leave them all at default values.
  2. Click on Open URL which should open a new browser window and redirect you to Twitch to authorize LioranBoard.
    Press Authorize and wait to be redirected again to see All good, you can go back to LioranBoard now message in your browser.
  3. Go back to your Receiver. You should see a green text Token was obtained successfully. Token will expire on XXX. It means you will need to repeat this process again on this date. Don’t worry, LioranBoard will remind you when it’s due. Press Close.

    Successfully linked Twitch account
    Successfully linked Twitch account
  1. Press Connect to Twitch button. The button will grey out and you should see all the following yellow notification messages:

    Successfully connected to Twitch
    Successfully connected to Twitch

In your Transmitter, Pubsub and Chat status should change to Connected or svg image. Congratulations, your Twitch account is now connected!

7. Create your first button #

In this part of the tutorial we will learn how to create a button with a simple command and add a Twitch chat trigger to it.
You can follow the text instructions or click on to watch a short video.

  1. In your Receiver click on Add New Deck button. You should see a newly created blank deck named New Deck 6. Click on it.
  2. You will see an empty grid. This is your deck where you can create new buttons. Right click anywhere in the emtpy area and select Create Blank Button. A new empty button will be created. You can optionally add some text to it as well.
  3. Right click on the empty button - Add Commands.
  4. Click on the + symbol. A default command Math: Change Variable will be created. Left click on the field with its name and change it to Twitch: Chat Message command instead.
  5. Populate the fields:
    1. Message - Put a random text in there. For example Hello World!.
    2. Channel Name - Leave empty
    Press done once you're finished.
  6. Back at our main deck view, right click on the new button - Add Twitch Triggers. This is where you assign Twitch events (such as new subscriber or chat message) to automatically trigger your buttons.
    1. Click on the + sign - Chat Message.
    2. Populate the Message field with !test.
    3. Press Done.
  7. Once you're back at your main deck view, press Done.
  8. We have now created a button that will send a chat message Hello World anytime it's triggered. We have also created a Twitch chat trigger which will execute the button any time someone types !test in your Twitch chat.

    Trigger the button manually from Stream Deck #
    1. Navigate to lioranboard/LioranBoard Stream deck(PC) folder and launch LioranBoard Stream Deck.exe. This is your Stream Deck where you can manually trigger buttons you create in your Receiver.

    2. You will see a green screen with some additional settings. Leave IP and Port at default. Selected Deck number needs to match your newly created deck number in your Receiver. In our case it should be number 6.
      OBS Websocket Connection Messages
      OBS Websocket Connection Messages
    3. Press Connect and you should see your newly created button that we named chat message.
    4. While looking at your Twitch chat, click on the button in your Stream Deck. It should send a Hello World message to your chat!
      Important: Your Receiver must be running, connected to Transmitter and connected to Twitch.

    Trigger the button via your Twitch chat #

    Do you still remember the Twitch chat trigger you configured for your button? If you followed the tutorial, it should be !test.

    1. Try typing !test (or anything else you chose to be your trigger) in your Twitch chat while looking both at your chat and Stream Deck.
      Two things should happen:
      • You will see the button in your Stream Deck blink, just like when you manually pressed it with your mouse.
      • LioranBoard will respond back with Hello World in your Twitch chat.

    Now you have learned how to create a button, add a command and trigger it via Twitch chat! You can find more information about the individual components, commands and triggers in the next sections of the documentation.