Website chat
Add the AI support chat window to your website with one line of code, and set allowed websites, styling, languages and signed-in customers.
The snippet
Copy your snippet from "2. Put the chat window on your website" (2. 把客服窗口装到你的网站) on the Setup (接入) page of the console, and paste it before </body> on every page of your site:
<script src="https://askpurser.com/embed/v1.js" data-key="pk_…" async></script>data-keyis your workspace's publishable key, starting withpk_. It is public by design and can only open a chat.asynckeeps the script from blocking your page. Pasting it twice on one page still loads it once.- A round button appears in the bottom right (or bottom left) corner and opens the chat window. The window is 380px wide; on screens 480px wide or less (phones) it fills the screen.
- The chat runs in its own iframe served from askpurser.com, so other scripts on your site (analytics, session recorders, browser extensions) cannot read the conversation or the customer's orders.
- Every error inside the script is caught; it never breaks your page.
Optional attributes
| Attribute | What it does |
|---|---|
data-key | Required. The publishable key |
data-locale | Fixes the language of the window's interface, e.g. data-locale="ja". Without it, the customer's browser language is used |
data-position | data-position="left" puts the button in the bottom left corner, overriding the position in your style settings |
data-hidden | No round button; open the chat from your own button with Purser.open() |
Which workspace it belongs to, how it looks and what it may do are all decided by the server; nothing on the page can change them.
Open it from your own button
<script src="https://askpurser.com/embed/v1.js" data-key="pk_…" data-hidden async></script>
<button onclick="window.Purser.open()">Contact us</button>Once the script has loaded, window.Purser has these methods:
| Method | What it does |
|---|---|
Purser.open() | Opens the chat window |
Purser.close() | Closes the chat window |
Purser.identify(token) | Tells the window which signed-in customer this is (see below) |
Purser.identity = async () => token | The same, but can be set before the script loads; it is read when the chat opens |
If your site sends a Content Security Policy
If your site has a Content-Security-Policy header, allow askpurser.com:
script-src https://askpurser.com
frame-src https://askpurser.com
connect-src https://askpurser.comThe button is styled with a stylesheet inside a Shadow DOM, so style-src does not need to change.
Allowed websites
On the Setup (接入) page, under Allowed websites (允许的网站), enter one storefront address per line, for example https://shop.example.com, then click Save (保存).
- It must be
https; onlyhttp://localhostmay use http. Up to 20 entries. - Only the scheme, host and port count; any path is dropped.
www.and the bare domain are two different addresses, so list both if you use both. - Changes apply shortly after you save; you do not need to paste the snippet again.
| Not set yet | Set | |
|---|---|---|
| Real workspace | The chat window only appears in Try it (试聊) in the console; on your site the browser blocks it and it does not open | Works only on the listed sites |
| Test workspace | Works on any page, including localhost and a local HTML file | Works only on the listed sites |
The in-app support page is not restricted by this list.
Styling
Chat window style (客服窗口样式) on the Setup page has four settings, with a live preview beside them:
| Setting | Options |
|---|---|
| Accent colour (主色) | A 6-digit hex colour such as #1d4ed8; default #111827 |
| Position (位置) | Bottom right (右下角, default) / bottom left (左下角) |
| Corner radius (圆角) | Small (小) / medium (中, default) / large (大) |
| Header (标题栏) | White (白色, default) / accent colour (主色) |
Text on the button, the customer's message bubbles and the send button is always white, so the accent colour must reach a 4.5:1 contrast ratio against white (WCAG AA). A colour that is too light cannot be saved; the page offers a darker colour of the same hue, and clicking "Use #……" (改用 #……) applies it.
After you save, the change shows on your site within seconds (reload the page to see it), and within 5 minutes at most. These four settings are all there is: custom CSS is not supported.
"Powered by purser"
The bottom of the chat window shows a small "Powered by purser" line linking to askpurser.com.
- On Free it is always shown and cannot be turned off.
- On Starter, Growth and Scale you can turn it off in Settings (设置) → Plan & billing (套餐与账单), on the "由 purser 提供" card.
- If a paid plan ends, or a failed payment runs past the grace period and the workspace falls back to Free limits, it shows again.
Signed-in customers
By default every conversation is anonymous, and the AI does not reveal any order details.
To let the AI answer "where is my order", your server signs an identity token for the signed-in customer and your page hands it to the chat window:
<script>
window.Purser = window.Purser || {};
window.Purser.identity = async () => {
const vid = localStorage.getItem("purser_vid");
const r = await fetch("/purser-token?vid=" + encodeURIComponent(vid));
return r.ok ? r.text() : null; // null when nobody is signed in
};
</script>This can go before or after the snippet. /purser-token is an endpoint on your own site, and purser_vid is the visitor ID the snippet creates in the browser.
- A token is valid for 10 minutes at most, can be used once, and is bound to that visitor ID.
- An invalid token makes the conversation anonymous; nothing errors.
- When the customer signs in or out, call
Purser.identify(newToken or null)and the window starts a new conversation. If the page no longer provides a token, the next chat is a new anonymous one; it never continues the previous customer's conversation.
How to sign tokens, and the full rules: Identity tokens.
Languages
The window's interface (input box, buttons, notices) comes in 12 languages: English, Simplified Chinese, Traditional Chinese, Japanese, Korean, Spanish, French, German, Portuguese, Thai, Vietnamese and Indonesian.
- It follows the customer's browser language; Chinese from Taiwan, Hong Kong and Macau uses Traditional Chinese. Any other language shows English.
- Use
data-localeto fix the interface language.
AI replies are not translated: the AI writes directly in the language of the customer's latest message, whatever the language of your knowledge base or the interface. A customer who asks in Japanese gets an answer in Japanese.
AI disclosure
The chat window tells customers they are talking to an AI, and you cannot turn this off:
- Every conversation starts with a greeting that says this is your shop's AI assistant and that a person can take over at any time. In English: "Hi! I'm Blind Box Tokyo's AI assistant. Ask me anything — a person from our team can take over whenever you like." The store name is your workspace name.
- AI replies are labelled "AI assistant", and replies from your team "Customer service".
In a test workspace and in Try it, the window shows "Test mode" next to its title.
Also
- Customers can send photos with Add a photo (JPEG, PNG, WebP or HEIC, up to 10 MB).
- You can add a feedback entry to the top of the window; see Product feedback.