Skip to main content

How to setup the widget Spotlight

Updated over a week ago

First, integrate the widget on your page


How positioning works

In the code you integrated, you will see a CSS class you can edit to handle the positioning:

<style>
#join-widget-YOUR_ALIAS {
position: absolute;
top: 10px;
right: 0;
}
</style>


Choose mode

  • position: absolute; โ†’ Anchored inside the nearest positioned parent. Great for placing it inside a specific section/card.

    • If you use absolute, make sure the target parent has position: relative;.

  • position: fixed; โ†’ Anchored to the viewport (stays during scroll). Great for a floating button.


๐Ÿ“ How to Move the Widget

To move it, you only edit these: top / bottom / left / right

#join-widget-YOUR_WIDGET { 
position: absolute;
top: 10px;
right: 0;
}

Example for Top right corner :

top: 0;
right: 0;

You can use โ€œpxโ€ or โ€œ%โ€

Examples:

top: 20px; /* move 20px down */ 
right: 50px; /* move 50px away from the right side */
left: 50%; /* put it in the horizontal middle */

Keep it above other UI (optional)

If something overlaps the square, raise its stacking order:

#join-widget-YOUR_WIDGET { 
...
z-index: 9999;
}

The maximum is 2147483647.


Bubble direction (important!)

In the widget settings/ Orientation, you can switch the widget side.

๐Ÿ’ก๐Ÿ‘‰ If the bubble points โ†’ to the right, you should place the widget on the left side of the page.

That means in the CSS you write:

left: 0;

๐Ÿ‘‰ If the bubble points โ† to the left, you should place the widget on the right side of the page.

That means in the CSS you write:

right: 0;

โœ… This way the bubble always points into the page, not outside the screen.


Design

  • Size configuration: adjust size for desktop vs. mobile.

  • Border / Inner color / Icon: style tweaks so it matches your site.

๐Ÿ’กIf you donโ€™t set an inner color, it will be transparent.

  • Cover / Player tabs: choose the cover image/video and player behavior.

Did this answer your question?