Chat widget

This page covers the smallest working widget install and the one optional step that matters if you want Shopify-authenticated helpdesk.

Minimum requirements

• A widget created in Settings → Widgets
• The widget install snippet from Relay

Install

Add the widget script to the site where you want the launcher to appear:

<script
  src="https://app.superrelay.ai/widget/widget.js"
  data-relay-token="YOUR_WIDGET_TOKEN"
  data-relay-api-url="https://YOUR_API_HOST"
  defer
></script>

Relay gives you the exact snippet after widget creation. In most cases, you should copy that snippet directly and avoid editing it unless you need a different host.

If your site already knows who the visitor is, identify them with the widget SDK queue right after setup:

<script>
  window.$relay = window.$relay || []

  window.$relay.push([
    "identify",
    {
      name: "Jane Doe",
      email: "[email protected]",
      shopName: "acme.myshopify.com"
    }
  ])
</script>

Use the fields you actually have. For the full payload shape and the other widget commands, see Relay SDK.

What is required

• data-relay-token: Required
• data-relay-api-url: Required unless your hosted snippet already points at the correct API

Customization options

After the widget is created, you can adjust its content and styling in Settings → Widgets.

• Appearance: Change the welcome title, tagline, and theme color. You can use a preset color or choose a custom one.
• Knowledge Base: Turn on the knowledge base tab, rename it, and choose which knowledge base the widget should use.
• Helpdesk: Turn on the helpdesk tab, rename it, and allow users to raise new tickets from inside the widget.

If you only need basic chat, you can leave the knowledge base and helpdesk options off.

Shopify-authenticated helpdesk

Basic widget chat works without Shopify auth.

If you want Shopify-authenticated helpdesk inside the widget:

1. Link the widget to an app in Relay.
2. Save that app's Shopify client ID and client secret in Settings → Apps.
3. Make window.shopify.idToken() available at runtime.

For local testing, the widget can also read:

• data-relay-id-token
• data-relay-customer-token

Keep those values as testing helpers, not as the default production path.