Installation

Bluestars loads from one script tag. Add it once, sitewide — ideally in the <head>, or just before the closing </body>.

<!-- Bluestars -->
<script
  async
  src="https://bluestars.app/widget/bluestars.js"
  data-tenant-id="00000000-0000-0000-0000-000000000000"
></script>

Replace the data-tenant-id value with your own tenant ID (find it in your dashboard). That’s the whole integration — everything else is configured from the dashboard, not in code.

Attributes

Attribute	Required	Description
`data-tenant-id`	Yes	Your tenant UUID. Without it the widget logs a warning and does nothing.
`data-api-url`	No	Override the API origin. Defaults to the origin the script was loaded from. Only needed for custom setups.
`async`	Recommended	Loads without blocking page rendering.

What happens on load

The script waits for the DOM to be ready.
Bots are skipped — crawlers and headless agents never trigger the widget.
It fetches your published configuration and resolves the visitor’s BSR segment.
It applies the segment class and any content swaps.
If an assistant placement matches the page, the assistant mounts there.

The widget also runs a MutationObserver for ~10 seconds after load, so it still attaches correctly on pages that inject content late (sliders, hydration, SPA navigation).

Style isolation

The assistant renders inside a Shadow DOM. Your site’s CSS cannot leak into the widget, and the widget’s CSS cannot leak into your site. You never need to worry about class-name collisions or specificity wars.

Verify the install

Open your site with ?bs=1 appended to the URL (e.g. https://your-site.nl/?bs=1) and open the browser console. In preview mode the widget logs the resolved BSR color and the result of every content swap, so you can confirm the script is loading and reaching the API.