Content swappen

Met content swappen kun je andere tekst per segment tonen in elementen die al op je site bestaan — zonder je templates aan te raken. Je wijst in het dashboard een CSS-selector aan op bestaande tekst, en Bluestars herschrijft die tekst passend bij het segment van de bezoeker.

Hoe je het instelt

In het dashboard, onder Assistent → BSR content, definieer je contentblokken. Elk blok bestaat uit een label plus een of meer CSS-selectors die verwijzen naar bestaande elementen op je site:

.home .hero h1
.product .header

Eén selector per regel.
Een selector mag meerdere elementen matchen — alle matches krijgen dezelfde variant.
Selectors richten zich op jouw bestaande markup; je voegt niets toe aan de pagina.

Hoe het werkt tijdens runtime

De widget verbergt de doelelementen kort om een flits te voorkomen (met een veiligheidsklep van 3 s die ze hoe dan ook weer toont).
Voor elke match leest hij de inhoud van het element — met behoud van structuur. Innerlijke tags zoals <strong>, <a href> en regeleinden blijven behouden; alleen de voor mensen leesbare tekst komt in aanmerking om herschreven te worden.
Hij vraagt de segment-specifieke variant op uit de content-cache.
- Cache hit → de tekst wordt veilig verwisseld en ingefade. Het element wordt gemarkeerd met data-bs-content-swap="1".
- Cache miss → de bezoeker ziet deze keer je originele tekst, en de widget verwarmt de cache op de achtergrond voor de volgende bezoeker.

Een MutationObserver blijft ~10 s actief om SPA-routewijzigingen en lazy-loaded content op te vangen. Al verwisselde elementen worden nooit twee keer verwerkt.

Zelf-opwarmende cache

Varianten worden op aanvraag gegenereerd en globaal gecachet per (tekst, segment, taal):

Bezoeker #1 voor een gegeven tekst + segment ziet het origineel en triggert een opwarming.
Bezoeker #2 en verder krijgen direct de gecachete, verwisselde versie.

Veiligheid

Verwisselde content wordt opnieuw opgebouwd via een strikte tag-whitelist. Ruwe modeloutput wordt nooit als HTML geïnjecteerd: event handlers (onclick, …) worden verwijderd en onveilige URL’s (javascript:, data:, vbscript:) worden gestript. Plaintext-elementen worden bijgewerkt via textContent.

Taal

De doeltaal wordt automatisch gedetecteerd op basis van de <html lang> van je pagina, daarna de browsertaal, met Nederlands (nl) als standaard. Varianten worden per taal gecachet.

De `data-bs-content-swap`-markering

Na een geslaagde swap draagt het element data-bs-content-swap="1". Je kunt dit gebruiken om verwisselde elementen te observeren of te stylen, bijv.:

[data-bs-content-swap="1"] {
  /* your styling for personalized copy */
}

Content swap vs. de segmentklasse

	Segmentklasse	Content swappen
Beste voor	Kleuren, beeld, tonen/verbergen, layout	Tekst / copy
Jij beheert	Je eigen CSS	Selectors + gegenereerde varianten
Beheerd door	Jij	Bluestars (gecachet)

Gebruik beide samen: de klasse voor look-and-feel, content swappen voor de woorden.