> ## Documentation Index > Fetch the complete documentation index at: https://docs.reelevant.com/llms.txt > Use this file to discover all available pages before exploring further. # Reelevant Client Side Script > Integrate Reelevant personalisation on the client side using the tracking script and browser extension ## Overview Client-side personalisation uses a JavaScript tracking script that loads in the browser. It fetches personalised content after the page renders and injects it into designated DOM zones. This is the original integration method and works alongside the [Server Side SDK](/developer-docs/web-integration/server-side-sdk/overview). ```mermaid theme={"theme":{"light":"github-light","dark":"github-dark"}} sequenceDiagram participant Browser participant Page as Your Website participant Script as Reelevant Script participant Runner as Reelevant Runner Browser->>Page: Load page HTML Page->>Script: Load tracking script tag Script->>Script: Read identity cookies (rlvt_clientId / rlvt_tmpId) Script->>Script: Scan DOM for [rlvt] zones & integrations Script->>Runner: GET /{workflowId}/{entrypoint}?rlvt-u={userId} Runner-->>Script: HTML / Image / JSON response Script->>Page: Inject content into [rlvt] zone or integration target Script->>Runner: POST /event (impression tracking) ``` ## When to use client-side personalisation | Use case | Recommended approach | | --------------------------------------------------- | ----------------------------------------------------------------------------------- | | Content that must be visible immediately (no flash) | [Server-side SDK](/developer-docs/web-integration/server-side-sdk/overview) | | SEO-critical personalised content | [Server-side SDK](/developer-docs/web-integration/server-side-sdk/overview) | | Event tracking (clicks, impressions, conversions) | Client-side script | | Consent-dependent content | Client-side script | | Overlays, popups, and floating elements | Client-side script | | Pages without server-side rendering (SPAs) | Client-side script | | Quick integration without code changes | Client-side script + [Browser Extension](/product-guide/browser-extension/overview) | ## Integration methods ### 1. Script tag (manual) Add the Reelevant tracking script to your page. The integration URL is generated from the [Integration modal](/product-guide/workflows/integration) in the workflow editor. ```html theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` The script automatically: * Creates an anonymous identity (`rlvt_tmpId` cookie) if none exists * Scans the DOM for `[rlvt]` attribute zones * Fetches personalised content from the runner * Injects content into matching zones * Tracks impressions and clicks ### 2. HTML zones Mark elements on your page where personalised content should appear: ```html theme={"theme":{"light":"github-light","dark":"github-dark"}}

Default content

``` | Attribute | Description | | ---------- | -------------------------------------- | | `rlvt` | Marks the element as a Reelevant zone | | `rlvt-wid` | Workflow ID | | `rlvt-ep` | Entrypoint shortId within the workflow | ### 3. Browser extension integrations The [Reelevant Browser Extension](/product-guide/browser-extension/overview) provides a no-code way to set up client-side integrations: Install from the [Chrome Web Store](https://chromewebstore.google.com/detail/reelevant/lgacfbhgdhamkljnljckjhogkmifijla?hl=en) or [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/aocpmahppepplambefpfnbnifdgolncb) and sign in with your Reelevant email and password or SSO. Open the page where you want personalised content to appear. In the extension side panel, browse your [workflow list](/product-guide/browser-extension/workflows) and select the one to integrate. Use the [content script UI](/developer-docs/guides/browser-extension-content-script) to pick a DOM selector, set emplacement, and define integration conditions. Click **Save** to persist the configuration. For channels that need direct URLs, open the [integration instructions](/developer-docs/guides/browser-extension-integration) to copy image and redirection links. ### Integration triggers Browser extension integrations support three types of triggers: | Trigger | Description | | ---------------------- | ------------------------------------------------------------------------------------ | | **URL pattern** | Content loads when the page URL matches a pattern (e.g., `/products/*`) | | **DataLayer variable** | Content loads when a specific value is present in the `dataLayer` (e.g., GTM events) | | **CSS selector** | Content is injected into a specific DOM element selected via the extension | ## Identity management The client-side script manages two identity cookies: | Cookie | Purpose | Lifetime | | --------------- | ------------------------------------------- | -------- | | `rlvt_tmpId` | Anonymous visitor ID, created automatically | 365 days | | `rlvt_clientId` | Known user ID, set by your application | 365 days | To associate a known user identity: ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} // Option 1: URL parameter // Add ?rlvt_clientId=user@example.com to the page URL // Option 2: dataLayer window.dataLayer = window.dataLayer || [] window.dataLayer.push({ rlvt_clientId: 'user@example.com' }) ``` ## Combining with server-side SDK When using both the server-side Web SDK and the client-side script on the same page: 1. **Server-rendered zones** should include `data-rlvt-ssr="true"` on the wrapper element 2. The client-side script automatically **skips** zones marked with `data-rlvt-ssr` 3. The client script still handles **event tracking**, client-only zones, and integrations ```html theme={"theme":{"light":"github-light","dark":"github-dark"}}

``` ## DataLayer integration The script reads values from the `window.dataLayer` array (Google Tag Manager compatible): ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} window.dataLayer = window.dataLayer || [] window.dataLayer.push({ locale: 'en-GB', country: 'UK', event: 'product_view', productId: 'SKU-12345', }) ``` These values are automatically forwarded to workflows as URL parameters for use in [data nodes](/product-guide/workflows/data-nodes/url-parameter).