Chat Widget

Install your AI agent on your website as a floating chat button that expands into a full conversation.

Find this page from the dashboard Setup card, Step 3 — Chat Widget. How the widget looks is configured separately on Config Agent.

Install Widget

Copy the snippet from the Embeddable Chat Widget section and paste it into your site's HTML, just before the closing </body> tag:

<script src="https://xinfer.ai/t/1072/widget.js" async></script>

The number is your account ID. Copy the snippet from the admin rather than typing it — the ID is deliberately used instead of your subdomain so that renaming your subdomain never breaks an installed widget.

Keep the async attribute. Without it the script blocks your page from rendering.

Shopify Theme Widget

Shopify merchants don't paste code at all. Instead of the snippet above, use this section:

  1. Click Open Theme Editor
  2. Find the XInfer.AI app block in the sidebar
  3. Toggle it on and save

The section shows an Active badge once the widget is live. To move it or restyle it afterwards, reopen the theme editor.

Passing Customer Information

If visitors are already signed in to your site, you can hand that context to the widget so follow-up forms arrive pre-filled and conversations link to the right customer.

<script
  src="https://xinfer.ai/t/1072/widget.js"
  data-customer-id="12345"
  data-customer-name="John Doe"
  data-customer-email="john@example.com"
  data-customer-hmac="9f2b…"
  data-customer-phone="+1-555-123-4567"
  async
></script>
AttributePurpose
data-customer-idYour internal customer identifier, for session linking and analytics
data-customer-namePre-fills the name field in follow-up forms
data-customer-emailIdentifies the customer — requires data-customer-hmac, see below
data-customer-hmacSignature proving the email claim is yours
data-customer-phonePre-fills the phone field in follow-up forms
data-positionbottom-right or bottom-left, overriding Config Agent
data-cart-syncSyncs the AI cart with your store's native cart
data-no-voiceDisables voice chat for this page

Secure Mode

An email on its own is a claim, not a proof — anyone can send a request asserting any address. So the email is only treated as an identity when it arrives with a matching signature.

Compute it on your server, never in the browser:

data-customer-hmac = HMAC-SHA256(your widget secret, email.trim().toLowerCase())

as lowercase hex. Canonicalize the email exactly as shown — trimmed and lowercased — before signing. A signature over differently-cased text will not verify, and that mismatch is the most common integration mistake.

This fails closed. With no secret configured, a missing signature, or one that doesn't match, the visitor is treated as an ordinary guest and the email is not used to attach to an account. Nothing breaks; the session is just anonymous.

Shopify stores get this automatically. The theme app extension signs the logged-in customer's email during theme render. No code, no secret handling.

On other platforms, contact support to obtain your widget secret — it is held server-side and is not shown in the admin.

JavaScript Configuration

For callbacks or values computed at runtime, configure the widget before loading it:

<script>
  window.XinferChat = {
    customerId: "12345",
    customerName: "John Doe",
    customerEmail: "john@example.com",
    customerHmac: "9f2b…",
    customerPhone: "+1-555-123-4567",
    position: "bottom-left",
    onReady: function () {
      console.log("Chat widget is ready");
    },
  };
</script>
<script src="https://xinfer.ai/t/1072/widget.js" async></script>

Note the capitalization: XinferChat, with a lowercase i in "infer".

Opening the Widget from Your Page

Once loaded, the widget exposes three methods — useful for a "Chat with us" link in your own navigation:

window.XinferChat.open();
window.XinferChat.close();
window.XinferChat.toggle();

Call these after onReady fires.

Widget Activity

The Widget Activity section lists the websites currently loading your widget, detected from live traffic. Use it to confirm an install worked, and to catch the widget running somewhere you didn't expect.

If a domain you own is missing, the widget either isn't installed there or hasn't been loaded by a visitor yet.

The Full-Page Agent

Your agent also works without any embedding, at https://[your-subdomain].xinfer.ai. Share it directly, link it from your navigation, or print its QR code. The link, QR code, and printable labels are on Config Agent.

See Chat Clients for how the widget and the full-page agent differ.

Troubleshooting

Widget doesn't appear

  • Confirm the snippet is before </body> and the account ID matches the admin
  • Check Allowed Domains on Config Agent — if it isn't *, your site must be listed
  • Open the browser console and look for [XinferChat] errors

Widget overlaps something on my page

Change Position on Config Agent, or set data-position per page.

Customer isn't recognized

The email needs a valid data-customer-hmac. Verify you signed the trimmed, lowercased email with the right secret.

Customer details don't pre-fill

Check the attribute spelling, and that values aren't empty strings.

Related Pages