Install the widget

Drop in one script tag to put the Airhop chat widget on your site, then identify your logged-in users.

The widget is the chat experience your customers use. It is one script tag, themed to your brand, and aware of who the logged-in user is.

The script tag

Paste this before the closing </body> tag on every page. You will find your real snippet, with your key filled in, on the onboarding Install step and on the Widget settings page.

<script src="https://app.airhop.ai/widget.js" data-key="pk_your_public_key" async></script>

The data-key is your widget's public key. It starts with pk_ and is safe to ship in client-side code.

The loader fetches a small appearance config (accent color, layout, title) from your dashboard, then injects a launcher button and an isolated iframe that holds the chat UI. Nothing else on your page is affected.

Layouts

The widget has two layouts. The dashboard sets the default; you can override it per page with data-layout:

bubble (default): an Intercom-style launcher in the bottom-right that opens a floating panel.
drawer: a full-height panel that slides in from the right with a backdrop.

<script
  src="https://app.airhop.ai/widget.js"
  data-key="pk_your_public_key"
  data-layout="drawer"
  async
></script>

Identify your users

If you tell the widget who the current user is, Airhop links the conversation to that person and account. There are two ways to do it.

Option A: data attributes

Seed identity from data-* attributes on the script tag. This is the simplest option when your server renders the user into the page:

<script
  src="https://app.airhop.ai/widget.js"
  data-key="pk_your_public_key"
  data-user-id="user_123"
  data-email="jo@acme.com"
  data-name="Jo Diaz"
  async
></script>

Option B: the `Airhop` function

Call window.Airhop('identify', { ... }) after the user logs in. You can pass user_id, email, name, and any custom fields:

<script>
  window.Airhop('identify', {
    user_id: 'user_123',
    email: 'jo@acme.com',
    name: 'Jo Diaz',
    plan: 'pro',
  });
</script>

Airhop is safe to call before the loader script has finished loading; calls are queued and drained once it is ready. The loader forwards the identity into the widget iframe.

If you do not identify a visitor, Airhop captures their email in the widget at the point it needs to (for example, when a conversation is escalated to a human so it can email them the answer).

The widget's identity (who is chatting) is separate from the product-events SDK (what users do). They use different keys: the widget uses your pk_ public key, and the events SDK uses your wk_ write key. See Send product events.

Theming

The launcher's accent color, layout, and title come from your Widget settings in the dashboard, so you can rebrand the widget without touching the snippet. The chat panel renders in an isolated iframe, so your site's CSS never bleeds into it.

How replies reach the customer

The widget persists the conversation in the browser and polls for new messages every few seconds. This is how a human's relayed answer (after a handover) and proactive playbook messages appear in the widget, with an unread badge on the launcher when it is closed.