The segment class

The simplest way to personalize is the body segment class. The widget adds a single class to your <body> element, one per visitor segment, and you write your own CSS against it. No changes to your templates, no content managed by us — just CSS you control.

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

The class is always bsr-segment- + the visitor’s pack slug. Old classes are removed before a new one is added, so exactly one bsr-segment-* class is present at a time.

The classes for your pack

The exact list depends on your pack:

bsr4: bsr-segment-rood, bsr-segment-geel, bsr-segment-blauw, bsr-segment-groen
bsr8: the eight color slugs (bsr-segment-rood, bsr-segment-lime, …)
bsr7lei: the seven leisure slugs (bsr-segment-avontuurzoekers, …)

Your dashboard’s Styling page lists the exact classes for your tenant and lets you copy them — “these are exactly the classes your visitors get, no more, no less.”

Best-guess visitors also get bsr-segment-unknown (see fallback).

Example 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 & good practice

The class is added asynchronously, roughly 200 ms after the segment resolves — not on the very first paint.

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

Reading the class in JavaScript

Because it’s added async, read it with a MutationObserver rather than at load:

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"] });

For analytics specifically, prefer the built-in event — see Analytics & GTM.