Installation

Open in workspace →

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

Embed script

Copy the embed snippet from 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.promptify object you can use to identify users.

Identifying users (required)

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

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

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

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

Tip

Using a signed JWT is recommended to prevent user impersonation. See User Identification for details on JWT signing.

Calls to promptify.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:

<div id="promptify-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:

<div id="promptify-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:

<div id="promptify-container" suppressHydrationWarning />

Theme

By default, the messenger respects your theme preferences configured in Settings > Messenger > Themes. To force a specific theme, add a data-theme attribute to the container element:

<div id="promptify-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.

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.