De segmentklasse

De eenvoudigste manier om te personaliseren is de body-segmentklasse. De widget voegt één klasse toe aan je <body>-element, één per bezoekerssegment, en jij schrijft je eigen CSS daartegen. Geen wijzigingen aan je templates, geen content die door ons wordt beheerd — alleen CSS die jij beheert.

<!-- What the widget adds for a "rood" (red) visitor: -->
<body class="bsr-segment-rood"></body>

De klasse is altijd bsr-segment- + de pack-slug van de bezoeker. Oude klassen worden verwijderd voordat een nieuwe wordt toegevoegd, dus er is precies één bsr-segment-*-klasse tegelijk aanwezig.

De klassen voor jouw pack

De exacte lijst hangt af van je pack:

bsr4: bsr-segment-rood, bsr-segment-geel, bsr-segment-blauw, bsr-segment-groen
bsr8: de acht kleur-slugs (bsr-segment-rood, bsr-segment-lime, …)
bsr7lei: de zeven leefstijl-slugs (bsr-segment-avontuurzoekers, …)

De Styling-pagina van je dashboard toont de exacte klassen voor jouw tenant en laat je ze kopiëren — “dit zijn precies de klassen die je bezoekers krijgen, niet meer en niet minder.”

Best-guess bezoekers krijgen ook bsr-segment-unknown (zie fallback).

Voorbeeld-use-cases

/* 1. Segment-specific CTA color */
body.bsr-segment-rood .cta {
  background: #d33;
}
body.bsr-segment-blauw .cta {
  background: #06c;
}

/* 2. Swap a hero image with pure CSS (no markup change) */
body.bsr-segment-groen .hero {
  background-image: url("/img/hero-groen.jpg");
}

/* 3. Show or hide a USP block per segment */
.usp--trust {
  display: none;
}
body.bsr-segment-blauw .usp--trust {
  display: block;
}

/* 4. Segment microcopy via ::before */
body.bsr-segment-geel .cta::before {
  content: "Populair bij mensen zoals jij — ";
}

Timing & goede praktijk

De klasse wordt asynchroon toegevoegd, ongeveer 200 ms nadat het segment is bepaald — niet bij de allereerste paint.

.cta {
  background: #333; /* neutral default, visible immediately */
  transition: background 0.3s ease;
}

De klasse uitlezen in JavaScript

Omdat hij asynchroon wordt toegevoegd, lees je hem uit met een MutationObserver in plaats van bij het laden:

new MutationObserver(() => {
  const seg = [...document.body.classList].find(
    (c) => c.startsWith("bsr-segment-") && c !== "bsr-segment-unknown"
  );
  if (seg) {
    // e.g. push to your own dataLayer
    console.log("BSR segment:", seg.replace("bsr-segment-", ""));
  }
}).observe(document.body, { attributes: true, attributeFilter: ["class"] });

Specifiek voor analytics kun je beter het ingebouwde event gebruiken — zie Analytics & GTM.