Setting up your Streamlabs widgets

This guide will walk you through the process of setting up your Streamlabs widgets (Alertbox, Donation Goals, Chatbox, Event List, Donation Ticker, and the Wish List ). 

 

The Alertbox

The Alertbox allows you to have on screen alerts for your Follows, Tips, Subscribers and much more!

To get started click "Alert Box" on the left sidebar. Then near the top of the page copy your "Alert Box link".

Alertlink.gif

X-split Instructions:

Open Xsplit and click add. Mouse down to Other and click “Url source”. Paste your widget link in.

Xsplit_gif.gif

 

OBS Instructions

Open OBS and click add. Mouse down to “Browser Source”. You will be prompted to add your link.

2016-10-12_12-40-00.gif

Gameshow Instructions:

Click add > web display and paste your link and click "ok". 

gameshow-instructions

796eee536f68448f14133825cc0a8217.gif

 

You can click test at the top of the Alertbox page to test at any time.

Alertbox_test.gif

Customize your alerts and press save.

You can customize the text,image,sound, and much more!

 

Donation Goals

Donation goals are a great way to get your viewers involved and show them that their donations are going towards you and the stream.

The streamer above is using the donation goal bar to have his chat raise money for his Server bill

To get started setting up a donation goal you will need to go to the donation goal page found here: https://streamlabs.com/dashboard#/donationgoal

  1. Setup your donation goal information

Start by entering in what you want the total of your donation goal bar to say.This is what will display above the goal bar when others see it. (Ex: Server bill for October) Next, you will want to set your goal amount, once the money reaches the amount the bar will be full.The starting amount value can be used if you have already raised some donations and want to have them go towards the goal. Lastly set an End date in the End After box, this will decide when you want your goal to end. (When entering the end date you need to give the entire date such as 07/21/2016 ) When you are ready click the big green "Start Donation Goal" button.

    2. Customize the donation goal bar

 To get started customizing your donation goal either press the big green "Donation Goal Widget " button or navigate to http://www.streamlabs.com/dashboard/widget-settings/donation-goal Here you can customize the standard or condensed layout and change any of the colors the bar uses. The font area can use any font on google.com/fonts .

   3. Add the widget

When you have it customized in the preview make sure to press the save settings button and then simply copy and paste the link at the top and insert it into your stream software.

 

Currently, an existing goal cannot be edited. if you want to change something in the goal itself you will need to end the goal and set a starting amount to continue your progress.

 

The Chatbox

The chatbox will allow you to beautifully show your chat on screen.

To set it up you will want to make sure you have prepared your software for widgets. (Guide can be found here: https://streamlabs.zendesk.com/hc/en-us/articles/217615917-Setting-up-your-streaming-software-for-widgets ) 

Next go to http://www.streamlabs.com/dashboard/chat-box and copy your custom link at the top and insert it into your streaming software. 

Screen_Shot_2017-06-20_at_2.26.55_PM.png

Theme can be used to set the look of your chat overlay using several premade themes or use custom css.

Badges will set what badges are shown in your chatbox widget. If you want to show mod icons or disable them. 

Extra Emotes can be checked if you want to show BTTV or FFZ emoticons on your chat overlay.

Screen_Shot_2017-06-20_at_2.27.08_PM.png

Background Color will set the color behind the chat. (Only worry about this if you are window capturing)

Text Color is the color of the chat messages in your chat overlay.

Text Size sets the size of all text in the overlay.

Screen_Shot_2017-06-20_at_2.27.24_PM.png

Hide Message After can be used to fade messages away after a set time. You can use the "Always Show Messages" box to disable fading . 

Hide Chatters can be checked and you can list names of users you want to hide in your chat. (Such as common bots used).

 

The Event List 

The event list is a way to easily and cleanly show your recent events such as followers, subscribers, or donations. 

To set it up you will want to make sure you have prepared your software for widgets. (Guide can be found here: https://support.streamlabs.com/hc/en-us/articles/217696187-Setting-up-your-streaming-software

Then simply copy the url at the top of the event list page https://streamlabs.com/dashboard#/eventlist and insert it into your streaming software. 

After you have done this you can now spend your time tweaking it . 

Screen_Shot_2017-06-03_at_10.25.31_AM.png

Theme will allow you to switch between some premade themes or set it to custom css.

Theme Color can be used to change the main color of the theme you are using.

Max events will allow you to set how many boxes the event list creates and shows at once.

Screen_Shot_2017-06-03_at_10.26.11_AM.png

Background Color will allow you to change the color behind the events. ( You only need to worry about this if you window capture)

Text Color is used for all the text within the event boxes.

Font will allow you to change the font inside your events.

Text size can be slid across to increase or decrease the size of your event text.

Screen_Shot_2017-06-03_at_10.26.46_AM.png

Animation allows you to set the animations on how the event boxes will enter and exit the window.

Animation Speed will let you set how quickly the animations occurs when the box enters or exits.  

Flip X and Flip Y allow you to set the axis the top box sits on. If you were to flip Y you would notice the top box would be at the bottom instead.

If you are a more advanced user you can set your theme to custom css and start coding away. 

 *NOTE- Events from eventlist stay on screen indefinitely, it does not disappear unless you press "clear history" on Streamlabs.  If you are viewing it on the launch window or preview mode, it will disappear.

 

The Donation Ticker 

The donation ticker is a pretty way to show your most recent donations scroll across your stream.

To set it up you will want to make sure you have prepared your software for widgets. (Guide can be found here: https://support.streamlabs.com/hc/en-us/articles/217696187-Setting-up-your-streaming-software

Next head over to https://streamlabs.com/dashboard#/donationticker copy the link at the top and paste it into your streaming software.

Now you can tinker with the Ticker's many settings.

ticker_1.png

Message Format can be used to modify if you want just the name or just the amounts to be shown.

Max Donations will set the maximum amount of donations the ticker will show at once.

Text Scroll Speed will set how quickly the ticker scrolls across the screen.

Background Color will set the color behind the ticker widget (you only need to worry about this if you are window capturing)

ticker_2.png

Font will let you change the font the widget displays in. (You can use google.com/fonts to see what you can use)

Font Size will let you change how big or small the Donation Ticker's font is. 

Font Weight will change how thick the font displays.

ticker_3.png

Text Color changes the color of any extra text added around the {name} or amount.

Name Text Color changes the color for the usernames who donated.

Amount Text Color changes the color for the money amount received.

You can always revert back to the default settings if you don't like your current ones. 

 

The Wish List

HOW IT WORKS: In the future, we hope to have it so that wishlist items can actually be purchased, but in this first release it works just like a fixed donation. Build your wishlist of items here, and when someone "buys" it for you off of your donation page, it will effectively force them to donate the amount of the item. The intent is to use the wishlist donated money to actually go buy the item, but that is up to you.T

1.  Go to your dashboard and click "Wish List".

Screen_Shot_2017-06-20_at_2.34.09_PM.png

2.  Click "Add a Wishilst Item" and another window will pop up.

3.  Find the link to the item that you want and paste the link on the first box. 

Screen_Shot_2017-06-20_at_2.45.56_PM.png

4.  When you press import, the data should automatically fill.  You might have to move the picture around a bit to center or to zoom in or out. 

5. Screen_Shot_2017-06-20_at_3.12.01_PM.png

6.  After you save it, you should see it on your wishlist page on Streamlabs and the donors will be able to see it on the donations page in the "Send a Gift" tab. You can check by going to www.streamlabs.com/donate/[TWITCHUSERNAME]. 

Screen_Shot_2017-06-20_at_3.12.10_PM.png

Have more questions? Submit a request

0 Comments

Article is closed for comments.