> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embedreach.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Reach

> Add Reach to your application interface

Embedding Reach into your application is straightforward and flexible.

## Creating a Container Element

First, create a div element that will serve as the container for the Reach interface:

```html theme={null}
<div id="reach-embed" style="height: 600px; width: 100%;"></div>
```

<Tip>
  We recommend a minimum height of 500px for optimal user experience, but the
  interface is fully responsive.
</Tip>

## Importing the SDK

There are two approaches to importing the SDK:

### Option 1: Dynamic Script Loading (Recommended for React/Next.js)

```javascript theme={null}
const importScript = resourceUrl => {
  const script = document.createElement('script');
  script.src = resourceUrl;
  script.type = 'module';
  script.async = true;
  document.body.appendChild(script);
  return script;
};

// Usage
const script = importScript('https://cdn.embedreach.com/iframe/sdk/sdk.es.js');
```

<Note>
  For React or Next.js applications, be sure to clean up the script on component unmount:
</Note>

```javascript theme={null}
useEffect(() => {
  const script = importScript('https://cdn.embedreach.com/iframe/sdk/sdk.es.js');
  
  return () => {
    if (script && document.body.contains(script)) {
      document.body.removeChild(script);
    }
  };
}, []);
```

### Option 2: Using a Script Tag

```javascript theme={null}
<script
  type="module"
  src="https://cdn.embedreach.com/iframe/sdk/sdk.es.js"></script>
```

## Initializing the SDK

Once the script is loaded, initialize the SDK with your configuration:

<Note>
  The `authToken` must be a valid tenant-scoped JWT token. See [Authentication](/embeddable-ui/authentication) for token requirements.
</Note>

```javascript theme={null}
const loadReachSDK = config => {
  try {
    const sdk = new window.ReachSDK(config);
    return sdk;
  } catch (err) {
    console.error('Failed to initialize ReachSDK:', err);
    throw err;
  }
};

// Example configuration
const config = {
  feature: 'measure', // The Reach feature to load
  authToken: 'jwt-token', // Initial JWT authentication token

  // Optional theme customization
  theme: {
    styles: {
      primary: '#00758a',
    },
  },

  callbacks: {
    onReauthRequested, // Function to handle token refresh
  },
};

// Initialize SDK
const sdk = loadReachSDK(config);
```

<Warning>
  In frameworks like React or Next.js, be careful not to initialize the SDK
  multiple times. Store the instance in a ref or variable outside the
  component's render cycle.
</Warning>

## Security Headers (CSP)

If your application enforces security headers like Content Security Policy, add the following sources to allow the SDK to load and render the embedded interface:

```
Content-Security-Policy:
  script-src 'self' https://cdn.embedreach.com;
  frame-src 'self' https://cdn.embedreach.com;
  connect-src 'self' https://api.embedreach.com;
```

Notes:

* These directives are for the embeddable UI SDK. The script is served
  from `https://cdn.embedreach.com` and the iframe is hosted on the same
  domain; API requests go to `https://api.embedreach.com` from inside the
  iframe.
* If you are installing the website attribution snippet instead, that script has different CSP needs. See
  the [Attribution setup guide](/attribution/setup) for details.

See the full [Security Headers (CSP & COOP)](/embeddable-ui/security-headers) guide.

## Iframe sandbox and permissions

The SDK creates the Reach iframe with a restrictive [`sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox) attribute and grants only the tokens needed for the product to run. The sandbox token list is:

* `allow-scripts` — Run JavaScript inside the embedded UI
* `allow-same-origin` — Treat the iframe as same-origin with `cdn.embedreach.com` for storage and APIs used by the app
* `allow-forms` — Submit forms inside the embedded UI
* `allow-popups` — Open new browsing contexts (for example `window.open` or `target="_blank"`)
* `allow-popups-to-escape-sandbox` — New windows opened from the iframe are **not** sandbox-restricted, so third-party pages that use strict response headers can load correctly (for example partner booking or intake flows opened in a new tab)
* `allow-downloads` — Trigger file downloads from the embedded UI where supported

Separately, the iframe sets `allow="microphone"` so Voice features can request microphone access when your host page and browser policy permit it.