Overlay Settings

Overlay Settings let you create and manage the overlays Supertip uses to display your tips, goals, and QR code on stream — and build the layout of each one from composable layers. To open them, go to the Creator Dashboard and select Settings > Overlay.

Managing your overlays

The Overlays section lets you create and configure multiple Supertip overlays. A default overlay is already set up for you, and you can create your own with the Create Overlay button. Each overlay you build has its own layout and its own URL, so you can switch between different setups for different scenes or streaming software.

Each overlay in the list has its own set of details and actions.

Setting	What it does
Overlay Connection Status	Shows whether the overlay is connected to your open streaming software or browser. Connected means the overlay is linked to streaming software or a browser you have open — you can play tips from the Unplayed queue. Disconnected means the overlay is not linked — you cannot play or clear tips from the Unplayed queue.
Overlay Title	The name of the overlay.
Overlay Layers	The types of tips and features configured in the overlay. An overlay can include Voice Tips, Text Tips, Image Tips, Polls, Goals, Contributors, and the QR Code.
Edit	Lets you customize the layout of the overlay.
Copy URL	Copies the overlay’s URL so you can configure it into your streaming software. See Overlay Setup for how to use the URL in OBS, Evmux, or Streamyard.
Duplicate	Creates a copy of the selected overlay that you can configure into a new overlay.
Reset URL	Creates a new URL for the overlay, which you can then copy with Copy URL.
Delete	Deletes the selected overlay.

Tip

To monitor and manage the overlays connected to your streaming software while you stream, see the Overlays Panel for the live monitoring view.

Caution

Resetting an overlay’s URL disconnects every overlay currently connected in your streaming software. You will need to copy the new URL and use it again in OBS, Evmux, or Streamyard. See Overlay Setup.

Creating & editing an overlay

A default overlay already exists. You can build a new one with the Create Overlay button, or change an existing one with Edit Overlay. Either choice opens the overlay editor, where the LAYOUT section shows where each element appears on your overlay and the LAYERS section lists the layers the overlay is built from.

To create a new overlay:

1. Enter a title for the overlay in the Untitled Overlay text box.
2. Select the plus sign next to the LAYERS box, then choose the tip or feature you want to add.
3. Your selection appears in the LAYOUT box, where you can resize it and reposition where it appears on the overlay.

The layers panel

Once you have added elements to your overlay, you can change how those elements are configured from the LAYERS panel.

Setting	What it does
Layer Order	Click and drag to re-order the selected layer within the overlay layout.
Lock	Toggle to lock or unlock the position of the selected layer.
Toggle Visibility	Hide or show the layer in the overlay editor only. The layer still renders normally on your live overlay — toggling visibility just gets it out of the way so you can manage and edit overlapping elements more easily.
Delete	Deletes the layer from the overlay layout.

Repositioning & resizing

The large box in the LAYOUT section represents your Supertip screen overlay as viewers see it. Use it to arrange where each element appears.

To reposition an element:

1. Select the element you want to move.
2. Drag the element to its new position within the overlay box.
3. Select Save.

To resize an element:

1. Select the Snap to Grid toggle if you want exact alignment for each element (optional).
2. Select the corner handle of the overlay element you want to resize.
3. Drag the handle to resize the element within the overlay box.
4. Select Save.

Use the Snap to Grid toggle for exact alignment when positioning or resizing elements. Selecting Reset All to Defaults returns every element to its default position and size.

Voice Tips

To open the Voice Tips settings, select the blue Voice Tips box from the LAYOUT section, or select the Voice Tips option from the LAYERS box. These settings control how Voice Tips appear on your overlay.

Setting	What it does
Voice Tips Width	Use the slider to adjust the width of the overlay box.
Voice Tips Height	Use the slider to adjust the height of the overlay box.
Preview	Toggle to show an example of how an actual Voice Tip appears on the overlay.
Align	Adjusts where the Voice Tip aligns within the box on the overlay layout.
Hide Avatar	Hides the viewer’s avatar when the tip is played.
Hide Name	Hides the viewer’s name when the tip is played.
Hide Amount	Hides the dollar amount the viewer spent on the played tip.
Hide $0 Tip Amount	Zero-dollar tips do not show the dollar amount.
Disable Speaker Head Animation	By default, the speaker image moves in sync with the audio when a voice tip plays. Enable this setting to keep the speaker image static while the voice tip plays.
Hide Speaker Head	When enabled, the speaker image does not display while the voice tip plays.
Show Speaker Name	When enabled, the AI voice speaker’s name is displayed while the voice tip plays.
Reset Voice Tips to Default	Returns the Voice Tip overlay settings to their defaults.

Tip

Enable the Preview toggle to see how each setting changes the way Voice Tips are displayed.

Text Tips

To open the Text Tips settings, select the purple Text Tips box from the LAYOUT section, or select the Text Tips option from the LAYERS box. These settings control how Text Tips appear on your overlay.

Setting	What it does
Text Tips Width	Use the slider to adjust the width of the overlay box.
Text Tips Height	Use the slider to adjust the height of the overlay box.
Preview	Toggle to show an example of how an actual Text Tip appears on the overlay.
Align	Adjusts where the Text Tip aligns within the box on the overlay layout.
Hide Avatar	Hides the viewer’s avatar when the tip is played.
Hide Name	Hides the viewer’s name when the tip is played.
Hide Amount	Hides the dollar amount the viewer spent on the played text tip.
Hide $0 Tip Amount	Zero-dollar tips do not show the dollar amount.
Allow Text Pseudonyms	Lets viewers change their displayed name when creating their tip.
Reset Text Tips to Default	Returns the Text Tip overlay settings to their defaults.

Tip

Enable the Preview toggle to see how each setting changes the way Text Tips are displayed.

Polls

To access your Polls overlay settings, select the purple Polls box from the LAYOUT section, or the Polls option from the LAYERS box.

Tip

This page covers how the Polls overlay looks on stream. For how to create and manage polls from the Creator Dashboard Panel, see Polls.

Setting	What it does
Polls Width	Use the slider to adjust the width of the Polls overlay box.
Polls Height	Use the slider to adjust the height of the Polls overlay box.
Particles	Enables a particle effect when displaying your Poll.
Particle Colors	Select the color of the particle effect.
Particle Shapes	Select the shape of the particle effect.
Background	Allows you to use a background in your Poll overlay. See Background below for the available modes.
Background Color	Select the color of your Poll background if SOLID COLOR is selected from the Background option.
Poll Text Color	Select the color used in the text of your Poll.
Preview	Shows a preview of what your Poll will look like on your Overlay.
Reset Polls to Defaults	Resets your Polls overlay settings back to their default settings.

Background

The Background setting controls how the area behind your Poll appears on the overlay. Three modes are available:

Mode	Behavior
NONE	The background will be transparent.
SOLID COLOR	The background will be the color you select from the Background Color option, and the transparency will be set to your selection from the Opacity slider.
IMAGE	Allows you to upload an image for use as the Poll background. You can set the transparency of the image using the Opacity slider.

Goal

To open the Goal settings, select the red Goals box from the LAYOUT section, or select the Goals option from the LAYERS box. These settings control how Goals appear on your overlay.

Setting	What it does
Goals Width	Use the slider to adjust the width of the Goals overlay box.
Goals Height	Use the slider to adjust the height of the Goals overlay box.
Preview	Toggle to show an example of how a Goal appears on the overlay.
Progress Bar Gradient	Use the Start Color and End Color to adjust the gradient of the Goals progress bar.
Goal Widget Background	Use the Start Color and End Color to adjust the gradient of the Goals widget background.
Background Opacity	Use the slider to adjust the opacity of the Goals background.
Goal Widget Text Color	Adjusts the Goal text color.
Goal Widget Border Radius	Adjusts how much rounding is used on the Goal box corners.
Title Alignment	Adjusts how the Goal title text is aligned within the Goal box.
Orientation	Display the Goal in either a Horizontal or Vertical arrangement.
Show Title	Toggles the visibility of the Goal title.
Reset Goals to Defaults	Resets your Goals settings back to their defaults.

Tip

Horizontal orientation works best when the Goal sits along the top or bottom of the overlay; Vertical works best on the left or right side.

QR Code

To open the QR Code settings, select the orange QR Code box from the LAYOUT section, or select the QR CODE option from the LAYERS box. Viewers can scan your QR code to open your Supertip page, and you can customize it from these settings or download it as an image file to use anywhere.

Setting	What it does
QR Code Scale	Use the slider to adjust the height and width of the QR Code overlay box.
Reset QR Code to Default	Selecting Reset to Defaults returns your QR code settings to their original values.

Colors

Modify the color and gradient of your QR code by selecting the Colors option.

Setting	What it does
Color Schemes	Select from a number of pre-made QR Code color themes.
Custom Colors	Create a custom color scheme using the Module Color, Background Color, Position Ring Color, and Position Center Color selectors.
Gradient Effects	Select Linear Gradient or Radial Gradient to add a gradient. Use the Start Color and End Color selectors to choose the gradient colors. The Linear Gradient also lets you set the Gradient Direction.

Style

Modify the visual style of your QR code by selecting the Style option.

Setting	What it does
Dot Style	Changes the shape of the small squares that make up the main area of the QR code.
Corner Square Style	Changes the shape of the corner squares used in the QR code.
Corner Dot Style	Changes the shape within the corner shapes of the QR code.

Background

Change how the QR code background is displayed by selecting the Background option.

Setting	What it does
Transparent Background	Removes the background color from the QR code.
Drop Shadow	Adds a drop shadow effect so the QR code stands out from the contents of your screen.
Shadow Color	Sets the color of the QR code drop shadow. Available only when Drop Shadow is enabled.
Shadow Blur	Configures the amount of blur in the drop shadow. More blur expands the shadow at a reduced sharpness; less blur gives the shadow a harder edge. Available only when Drop Shadow is enabled.
Shadow Opacity	Adjusts the opacity of the drop shadow. Available only when Drop Shadow is enabled.

URL

You can show your Supertip.gg URL below the QR code by enabling the Show URL Text toggle.

Select Save QR Code Settings to keep any changes you make, or Reset to Defaults to return the QR Code to its original settings.

Image Tips

To open the Image Tips settings, select the green Image Tips box from the LAYOUT section, or select the Image Tips option from the LAYERS box. These settings control how Image Tips appear on your overlay.

Setting	What it does
Image Tips Width	Use the slider to adjust the width of the overlay box.
Image Tips Height	Use the slider to adjust the height of the overlay box.
Preview	Toggle to show an example of how an actual Image Tip appears on the overlay.
Align	Adjusts where the tip aligns within the box on the overlay layout.
Hide Avatar	Hides the viewer’s avatar when the tip is played.
Hide Name	Hides the viewer’s name when the tip is played.
Hide Amount	Hides the dollar amount the viewer spent on the played tip.
Hide $0 Tip Amount	Zero-dollar tips do not show the dollar amount.
Reset Image Tips to Default	Returns the Image Tip overlay settings to their defaults.

Tip

Enable the Preview toggle to see how each setting changes the way Image Tips are displayed.

Image

The image overlay lets you add any static image to your overlay.

Note

This is not to be confused with the Image Tip overlay.

To open the Image settings, select the image box from the LAYOUT section, or select the Image option from the LAYERS box.

Setting	What it does
Image Width	Use the slider to adjust the width of the image.
Image Height	Use the slider to adjust the height of the image.
Fit	Choose how the image fills the box. Fit sizes the image to fit within the box area. Cover fills the box area without distorting the image. Stretch sizes the image to the exact box dimensions, which may distort it. Fill Canvas sizes the box to fill the entire overlay and fits the image within it.
Reset Image to Default	Resets all image overlay settings to their defaults.

Contributor

The contributor overlay displays the usernames and corresponding tip dollar amounts that have contributed to the goal.

Note

The Contributor overlay is automatically added to the layout when you add a Goals layer.

To open the Contributor settings, select the Contributor box from the LAYOUT section, or select the Contributor option from the LAYERS box.

Setting	What it does
Contributors Width	Use the slider to adjust the width of the Contributors overlay box.
Contributors Height	Use the slider to adjust the height of the Contributors overlay box.
Reset Contributors to Default	Resets all Contributors overlay settings to their defaults.