First, integrate the widget on your page
👉 Follow this guide: https://help.join-stories.com/en/articles/6811188-integrate-a-widget-on-a-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 hasposition: 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.