# JavaScript SDK

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

The JavaScript SDK lets you control the messenger widget from your frontend code. All methods are available on the `optlo` global object.

## Methods

### setUser

Identify the current user or set them as anonymous.

```js
// Identified user (without verification)
optlo.setUser({
  id: "user-123",
  email: "jane@example.com",
  name: "Jane Doe",
  avatarUrl: "https://example.com/avatar.jpg",
  attrs: {
    plan: "pro",
    signedUp: 1700000000,
  },
  organizations: [{ id: "org-456", name: "Acme Corp" }],
});

// Identified user (with signed JWT)
optlo.setUser({ jwt: "eyJ..." });

// Anonymous visitor
optlo.setUser({ id: null });
```

See [User Identification](/docs/messenger/user-identification/) for details on the user data fields and JWT signing.

### clearUser

Clear the current user. Call this when the user logs out of your application. Important for single-page apps, where logout is a client-side route transition rather than a full page reload.

```js
optlo.clearUser();
```

After calling `clearUser`, you can call `setUser` again to identify a new user.

### startConversation

Open the messenger and start a new conversation. Must be called after `setUser`.

```js
// Open with prefilled message
optlo.startConversation("I need help with billing");

// Open without prefill
optlo.startConversation();
```

### setTheme

Switch to a named theme configured in the dashboard.

```js
optlo.setTheme("dark");
```

Themes are created and configured in [**Settings > Messenger > Themes**](/workspace/_/settings/messenger/themes). The `setTheme` method switches between them by name at runtime. You can also set a theme declaratively using the `data-theme` attribute on the [container element](/docs/messenger/installation#theme).

### setLauncher

Show or hide the floating launcher button.

```js
// Hide the launcher button
optlo.setLauncher({ hidden: true });

// Show it again
optlo.setLauncher({ hidden: false });
```

Hiding the launcher only removes the floating button — the messenger stays fully functional. Use this when you want to open the messenger from your own UI (for example a custom "Contact support" link) by calling [`startConversation`](#startconversation), while keeping the default button out of the way.