# Installation

[Open in workspace →](/workspace/_/settings/messenger/install)

Install the Optlo messenger by adding the embed script to your website.

## Embed script

Copy the embed snippet from [**Settings > Messenger > Install**](/workspace/_/settings/messenger/install) and add it before the closing `</body>` tag on every page where you want the messenger to appear.

The snippet loads the widget asynchronously and sets up a `window.optlo` object you can use to identify users.

## Identifying users (required)

You **must** call `optlo.setUser()` for the messenger to connect. Without it, the widget will not start a session.

```js
// For logged-in users (with signed JWT)
optlo.setUser({ jwt: "eyJ..." });

// Without verification (only for testing or internal sites)
optlo.setUser({
  id: "user-123",
  email: "jane@example.com",
  name: "Jane Doe",
});

// OR for anonymous visitors
optlo.setUser({ id: null });
```

:::tip
Using a signed JWT is recommended to prevent user impersonation. See [User Identification](/docs/messenger/user-identification/) for details on JWT signing.
:::

Calls to `optlo.setUser()` made before the script finishes loading are queued and processed automatically.

## Container element

By default, the messenger renders at the end of the document body. You can optionally add a container element to control where it renders:

```html
<div id="optlo-container" />
```

### Astro View Transitions

If your site uses Astro's `<ClientRouter />` (formerly View Transitions), the messenger is removed on each navigation by default. Add `transition:persist` to the container element to keep it alive:

```html
<div id="optlo-container" transition:persist />
```

### React (Next.js, React Router, etc.)

If you render the container element in a server-rendered React app, add `suppressHydrationWarning` to prevent hydration mismatches:

```jsx
<div id="optlo-container" suppressHydrationWarning />
```

### Theme

By default, the messenger respects your theme preferences configured in [**Settings > Messenger > Themes**](/workspace/_/settings/messenger/themes). To force a specific theme, add a `data-theme` attribute to the container element:

```html
<div id="optlo-container" data-theme="dark" />
```

The value should match one of your configured theme names. When `data-theme` is set, the system preference is ignored and the specified theme is always used.

You can also switch themes dynamically at runtime. See [Themes](/docs/messenger/themes/#switching-themes-at-runtime).

## Verifying installation

Once installed, visit your site and look for the chat launcher in the corner of the page. Click it to open the messenger and send a test message.