Installatie

Bluestars laadt vanuit één scripttag. Voeg het één keer toe, over de hele site — idealiter in de <head>, of net voor de afsluitende </body>.

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

Vervang de waarde van data-tenant-id door je eigen tenant-ID (die vind je in je dashboard). Dat is de hele integratie — al het andere configureer je vanuit het dashboard, niet in code.

Attributen

Attribuut	Vereist	Beschrijving
`data-tenant-id`	Ja	Je tenant-UUID. Zonder deze logt de widget een waarschuwing en doet niets.
`data-api-url`	Nee	Overschrijf de API-origin. Standaard de origin waarvan het script is geladen. Alleen nodig voor maatwerk.
`async`	Aanbevolen	Laadt zonder het renderen van de pagina te blokkeren.

Wat er gebeurt bij het laden

Het script wacht tot de DOM klaar is.
Bots worden overgeslagen — crawlers en headless agents triggeren de widget nooit.
Het haalt je gepubliceerde configuratie op en bepaalt het BSR-segment van de bezoeker.
Het past de segmentklasse en eventuele content swaps toe.
Als een assistent-plaatsing bij de pagina past, wordt de assistent daar gemount.

De widget draait na het laden ook nog ~10 seconden een MutationObserver, zodat hij zich ook correct koppelt op pagina’s die content laat injecteren (sliders, hydratie, SPA-navigatie).

Style-isolatie

De assistent rendert binnen een Shadow DOM. De CSS van je site kan niet in de widget lekken, en de CSS van de widget kan niet in je site lekken. Je hoeft je nooit zorgen te maken over botsende klassenamen of specificiteitsgevechten.

De installatie verifiëren

Open je site met ?bs=1 achter de URL (bijv. https://your-site.nl/?bs=1) en open de browserconsole. In previewmodus logt de widget de bepaalde BSR-kleur en het resultaat van elke content swap, zodat je kunt bevestigen dat het script laadt en de API bereikt.