Rainbow Circular Goal Widget

You need to connect your StreamElements account to Widgetdeck only if you are planning to track tips you received to StreamElements. Otherwise, you can completely ignore this section.

1. 1

   In your Widgetdeck account, open Settings.

2. 2

   In Connected Services, expand StreamElements.

3. 3

   Open the StreamElements dashboard. Select your avatar, choose your channel, and then choose the correct platform channel for tip events. Copy that channel’s JWT.

4. 4

   Return to Widgetdeck, paste the JWT into the StreamElements token field, and select Save token.

5. 5

   Wait for the connection status to change to Connected. It may briefly show Connecting while the connection starts.

You may be wondering why you’re seeing one circular goal instead of four goals. Let’s clear up the confusion.

1. 1

   First, zoom out the window slightly.

2. 2

   The editor canvas represents your monitor screen. We can create copies of goals and place them next to each other, then scale them down later inside OBS. First, adjust the circular goal scale under Layout & Spacing as needed.

3. 3

   Go to Layers Panel. Select the first layer and double click on the name to rename it. Set the name to Tips.

4. 4

   Click the Duplicate icon. This creates a new copy of the selected Tips layer.

5. 5

   Create three duplicates and place them next to each other. Rename each layer for clarity.

6. 6

   Click on each layer, go to Settings → Goal Configuration, choose the goal types for each layer, and change the colors and title as you prefer.

Open the widget in your Widgetdeck editor and save your settings before adding it to OBS.

Now let’s add the widget to OBS using a Browser Source.

1. 1

   Open OBS and create a new browser source.

2. 2

   In the Widgetdeck editor, click Copy Widget URL.

3. 3

   Paste the copied URL into the URL box. Set the width to 1920 and the height to 1080. Click OK.

4. 4

   Scale and reposition the widget inside OBS by dragging its handles.

This is where you configure who can use chat commands to control the widget. Add your username here first. Otherwise, you won’t be able to use chat commands. To allow others, such as moderators, add their usernames separated by commas.

Goal Type: Choose what you want this layer to track. Duplicate layers to create goals with different types.

Goal Title: Set the label displayed beneath the circular goal.

Target Amount: Set the amount you want the goal to reach.

Start Amount: Set the goal’s current starting value. You can also update it with a chat command.

Currency Symbol: Choose the symbol shown for a tip goal.

Gradient Style: Choose Reveal to uncover the gradient as the ring fills, or Distribute to spread the gradient across the filled part of the ring.

Gradient Color 1-5: Choose up to five gradient colors. Use the same color in every slot for a solid-color ring.

Enable Glow Effect: Turn the glow around the progress ring on or off.

Enable Drop Shadow: Enable or disable the subtle shadow behind the ring.

Ring Width: Adjust the thickness of the progress ring.

Enable Animations: Turn smooth gradient color animation on or off.

Animation Speed: Set how quickly the gradient colors animate.

Set the font family, font size, and font color for both the Title and Stats. In Stats, set colors for the current amount, divider, and target amount. You can also enable or disable their glow.

Widget Scale: Change the size of the goal. Use only this slider to adjust the widget scale. Avoid changing its width and height.

Inner Stats Background Opacity: Set the opacity of the black background.

Gap Between Ring & Title: Change the gap between the title and the progress ring.

Use these commands to set a goal amount manually: