Content swapping
Content swapping lets you show different wording per segment in elements that already exist on your site — without touching your templates. You point a CSS selector at existing text in the dashboard, and Bluestars rewrites that text to match the visitor’s segment.
How you set it up
Section titled “How you set it up”In the dashboard, under Assistent → BSR content, you define content blocks. Each block is a label plus one or more CSS selectors that point at existing elements on your site:
.home .hero h1.product .header- One selector per line.
- A selector may match multiple elements — all matches get the same variant.
- Selectors target your existing markup; you don’t add anything to the page.
How it works at runtime
Section titled “How it works at runtime”- The widget briefly hides the targeted elements to prevent a flash (with a 3 s safety valve that reveals them no matter what).
- For each match, it reads the element’s content — preserving structure. Inner
tags like
<strong>,<a href>, and line breaks are kept; only the human-readable text is eligible to be rewritten. - It requests the segment-specific variant from the content cache.
- Cache hit → the text is swapped in safely and faded in. The element is
marked with
data-bs-content-swap="1". - Cache miss → the visitor sees your original text this time, and the widget warms the cache in the background for the next visitor.
- Cache hit → the text is swapped in safely and faded in. The element is
marked with
A MutationObserver keeps working for ~10 s to catch SPA route changes and
lazy-loaded content. Elements already swapped are never processed twice.
Self-warming cache
Section titled “Self-warming cache”Variants are generated on demand and cached globally per (text, segment, language):
- Visitor #1 for a given text + segment sees the original and triggers a warm-up.
- Visitor #2 onward gets the cached, swapped version instantly.
Safety
Section titled “Safety”Swapped content is rebuilt through a strict tag whitelist. Raw model output is never
injected as HTML: event handlers (onclick, …) are dropped and unsafe URLs
(javascript:, data:, vbscript:) are stripped. Plain-text elements are updated
via textContent.
Language
Section titled “Language”The target language is detected automatically from your page’s <html lang>, then
the browser language, defaulting to Dutch (nl). Variants are cached per language.
The data-bs-content-swap marker
Section titled “The data-bs-content-swap marker”After a successful swap, the element carries data-bs-content-swap="1". You can use
it to observe or style swapped elements, e.g.:
[data-bs-content-swap="1"] { /* your styling for personalized copy */}Content swap vs. the segment class
Section titled “Content swap vs. the segment class”| Segment class | Content swapping | |
|---|---|---|
| Best for | Colors, imagery, show/hide, layout | Wording / copy |
| You control | Your own CSS | Selectors + generated variants |
| Managed by | You | Bluestars (cached) |
Use both together: the class for look-and-feel, content swapping for the words.