Setting up your reaction widgetBy SmartASCII on Sat May 08 2021
Seen.gg's **Reaction Widget** allows streamers to increase engagement and add a personal touch to their stream by giving them the ability to summon an image by speaking out loud. This article will walk you through how to set it up for yourself and how to get the most out of it! It's important to note that the voice recognition API is still an experimental feature for most browsers, and though it has been thoroughly tested on *Google Chrome*, compatibility for other browsers may vary! ## **Creating Your First Reaction** To get started, navigate to your *Widgets* section from the left menu of your dashboard and scroll down to the *Reactions* section. > ![Reactions](https://i.imgur.com/khNtINh.png) Click the *Add New* button and a new Reaction will be created below. From there, we can begin creating our reaction using the fields provided: ##### **Keyword(s)** This is what you'll have to say in order to make the image appear. You can specify multiple keywords by adding a comma between them, such as "wow,whoa" ##### **URL** Here is where you'll put a URL to the image that you'd like to use. When you add your URL, a preview will appear on the right side to show you what it looks like: ![Working Preview](https://i.imgur.com/DpMqbvI.png) ![Broken Preview](https://i.imgur.com/Wt2dnMe.png) If it shows "Image Not Available", double check your URL. It may be incorrect, not a direct link to a file, or the host you're using doesn't allow hotlinking. It's always best practice to download the image and host it somewhere yourself -- [Imgur](http://imgur.com) is a popular and easy service to use for this! ***Note:*** The URL should be a direct link to the file. You can get this from most hosting sites by right clicking and selecting "Copy Image Address". ##### **Duration** This value is how long the image will remain on your screen, in seconds. ##### **Image Scale** If your image is too large on screen, you don't have to worry about scaling it down in an editor! Simply use this slider to resize it. ##### **Position** *(Pro members only)* By default, Reactions appear in the center of the browser source that you insert into OBS. If you're a *Pro member*, you can specify what part of the screen you'd like it to show! This is useful if you want different images to have different locations on your screen. ## **Adding Your Reaction to OBS** Now that you've created your Reaction, you're ready to insert it into your broadcasting software. Seen.gg's widgets and scenes *generally* work with any software that allows you to create a Browser Source, but for this purpose we'll be using OBS Studio. First, you'll want to create a new browser source within your scene and configure the size properly, depending on your usage: **Free accounts**: Your reactions will always be in the middle of the source, so size and scale it to your taste. **Pro accounts**: If you'd like to take advantage of positioning your Reactions, make sure your browser source is the same size as your canvas (probably 1920x1080) From there, simply click the *Copy* button next to your Reaction Widget URL field and paste it into your browser source. ![Reaction URL](https://i.imgur.com/pNruFOt.png) ## **Testing Your Reaction** Now that your have your browser source set up, it's time to test it out! Head back to your dashboard, and click the *Test* button on the reaction you've created. ![Test button](https://i.imgur.com/kxYcCdI.png) This button allows you to trigger your reaction without having to say the keyword over and over to get it just right. Once everything is how you like it, be sure to click your **Save** button! ## **Launch The Listener** In order to capture your mic input, you have to have the Listener window open. To do this, click the *Launch Reactions* button. ![Mic Permission](https://i.imgur.com/p0YxFdk.png) ![Input device](https://i.imgur.com/zHvyPaD.png) When you first launch the listener, it will ask you for permission to capture your mic. Make sure you click *Yes* and then click the camera icon in the URL bar to make sure the proper microphone is being captured. ![Listener window](https://i.imgur.com/JF5zhoV.png) Once that's done, you should be all set! When you speak into your microphone, the listener window should transcribe what it hears. If it doesn't, make sure to check your settings and mic volume to be sure everything is set correctly. With this done, whenever the listener window detects you speaking one of the keywords for any of your reactions, the appropriate image will appear in the browser source in your broadcasting software!