Support chat on your site and in your app

Drop the chat widget into your marketing site and your app: visitors and signed-in users write to you, you answer from the dashboard's inbox, your AI agent can answer first.

Your users and your site's visitors write to your team from a chat in the corner of the page. You answer from Support in the dashboard, beside what the token knows about them: plan, billing, roles and flags. Replies they miss are emailed, and their email answer comes back into the conversation.

1. Turn it on

In the dashboard, Support → Settings: Support chat is on. For a marketing site also turn on Visitors can start a conversation and list the site under Your sites; your apps' own addresses always work. Install the widget on the same page has both snippets below with your project filled in.

2. On your site, for visitors

Copy node_modules/@anchring/auth/anchring-chat.js to your site (one file, no CDN, about 13 KB compressed) and add two lines:

<script src="/anchring-chat.js" defer></script>
<anchring-chat project="acme" env="prod"></anchring-chat>

A visitor agrees to be answered before the first message; product news is a separate choice, only with an email. The widget stores the wording they saw with their consent, and visitors who never sign up are deleted after 90 days without activity.

3. In your app, for signed-in users

import '@anchring/auth/chat-widget';
import { auth } from './auth'; // createAuth() from @anchring/auth/browser

// <anchring-chat></anchring-chat> in your page:
document.querySelector('anchring-chat')!.auth = auth;

The widget lists the user's conversations, shows replies live, labels the AI agent and lets the user ask for a person. It is a custom element, so it works the same in React, Vue, Angular or plain HTML.

4. Make it yours

Colours, logo and corners come from Branding. Attributes and CSS custom properties override them:

<anchring-chat project="acme" env="prod" theme="auto" position="left" lang="da"
  color="#0f766e" radius="large"></anchring-chat>

<style>
  anchring-chat { --anchring-chat-font: "Inter", sans-serif; --anchring-chat-offset: 24px; }
</style>

The texts are English and Danish (the page's language), and each can be replaced with the strings property. With a Content-Security-Policy, allow your issuer in connect-src (and img-src for the logo); the widget needs no inline scripts or styles.

Your AI agent

Turn on An AI agent answers first, give a server key chat:agent, and answer the message.created webhook with admin.chat.reply, or hand over with admin.chat.handover. Users always see that it is AI.

Every option, error and token type: the SDK README.