# Web SDK Integration Beta The Web SDK is currently in beta. Please contact your account representative for more information. The Web SDK is the client-side JavaScript library that powers personalization on your website. It connects to the RT 2.0 reactor, evaluates visitor audience membership, fetches personalized creative assets, replaces content spot DOM elements, and tracks campaign events. Required Without the Web SDK installed on your website, no personalization will be displayed to visitors. Campaigns will be configured in Personalization Studio but won't reach your audience. ## What the Web SDK Does 1. Loads on the page (via script tag or async loader) 2. Identifies the visitor via the RT 2.0 reactor 3. Evaluates audience membership against campaign rules 4. Fetches the matching creative asset from the Personalization Studio API 5. Replaces the content spot's DOM element with the personalized content 6. Tracks impressions and clicks 7. Falls back to default content if the request fails or exceeds the performance SLA **Performance target:** Sub-second decisioning, retrieval, delivery, and rendering — or fallback content is shown. ## Installation Add the Web SDK script tag or async loader to every page on your website where personalization will run. Work with your Data Engineer to ensure the SDK is connected to your RT 2.0 reactor and Parent Segment. Place the SDK script tag as high as possible in the `` section. Avoid placing it at the bottom of `` or deferring it, as this increases the time before personalization can run. ## Add Stable IDs to DOM Elements Content spots target elements by their HTML `id` attribute. Before registering content spots in Personalization Studio, ensure that the DOM elements you want to personalize have stable, unique `id` attributes. ## Browser Security & Embedding Workarounds Several features in Personalization Studio embed your website in an iframe inside the application. This provides the best experience for content spot selection and content preview. However, many websites have browser security settings that prevent iframe embedding. Who performs this step? A **Web Developer** typically configures these workarounds because they involve browser security headers and domain-level settings. Digital Marketers who register pages or preview campaigns may also need Requestly installed on their browser. ### Configuring Requestly for Iframe Embedding Use a browser extension such as **Requestly** (available for Chrome and Firefox) to temporarily remove security headers while working in Personalization Studio. 1. Install Requestly from the Chrome Web Store or Firefox Add-ons. 2. Create a **Modify Headers** rule that applies to your website's domain. 3. Add two rules to **remove** these response headers: - `X-Frame-Options` - `Content-Security-Policy` 4. Enable the rule when working in Personalization Studio, and disable it when you're done. You can restrict the rule to specific pages using a URL filter to keep the scope narrow. Note This step must be completed before you can register pages or use the Visual Selector. The Visual Selector requires iframe embedding to load your website within Personalization Studio. ### Personalizing Content Behind Authentication If you want to personalize content that requires a user to be logged in: 1. Log in to your website in a separate browser tab **before** opening Personalization Studio. 2. Enable third-party cookies in your browser so cookies are shared across domains. **To enable third-party cookies in Chrome:** 1. Open **Settings > Privacy and Security > Third-party cookies**. 2. Select **Allow third-party cookies**. 3. Alternatively, scroll to **Sites allowed to use third-party cookies**, click **Add**, and enter your website's URL.