Installer le widget de chat

Ce guide est en anglais. Les guides suivent le produit de près et changent souvent : nous préférons tenir une seule version exacte plutôt que des traductions toujours en retard.

Paste the snippet

Sign in, open Settings → Install and copy the snippet shown there — it already contains your website id. It looks like this:

<script>
  window.$istyping = [];
  window.ISTYPING_WEBSITE_ID = "<your website id>";
  (function () { var d = document, s = d.createElement("script");
    s.src = "https://app.istyping.ai/widget/l.js"; s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s); })();
</script>

Put it on every page where the chat should appear, just before </body> or in your template’s footer. The loader is tiny and loads the rest of the widget asynchronously, so it does not hold up your page.

Installed the snippet before IsTyping got its name? Snippets that use $parley and PARLEY_WEBSITE_ID keep working, and so do $parley.push commands, data-parley-no-control and ?parley_trigger= links. You don’t need to change anything. Use the names on this page for new code.

If your site sends a Content-Security-Policy, allow https://app.istyping.ai in script-src, connect-src (and its wss: form for live updates), and img-src. You can also move the snippet into a file of your own instead of an inline script.

Commands are arrays pushed onto $istyping. You can push them before the widget has loaded; they run as soon as it is ready.

$istyping.push(["set", "user:email", "jane@example.com"]);   // typed by the visitor: shown as unverified
$istyping.push(["set", "user:nickname", "Jane Doe"]);
$istyping.push(["set", "user:phone", "+1 555 0100"]);
$istyping.push(["set", "session:data", { plan: "pro", client_id: 42 }]);
$istyping.push(["set", "session:segments", ["customer", "pro"]]);

Verified customers. If your customers sign in to your site, your server can prove who they are. Compute hex(HMAC-SHA256(identity secret, lowercase(trim(email)))) on the server — never in the browser — and pass the signature with the email:

$istyping.push(["set", "user:email", ["jane@example.com", "<signature from your server>"]]);

The identity secret is under Settings → Install. Verified visitors are marked as such in the inbox, and integrations such as WHMCS only show private account data for verified visitors.

When a customer logs out, start a fresh anonymous session so the next person on that computer does not see the conversation:

$istyping.push(["do", "session:reset"]);

$istyping.push(["do", "chat:open"]);          // also chat:close, chat:toggle, chat:show, chat:hide
$istyping.push(["set", "message:text", "Hi, I have a question about my invoice"]); // prefill the composer
$istyping.push(["do", "message:send", "Text sent as the visitor"]);
$istyping.push(["do", "session:event", ["plan_upgraded", { to: "pro" }]]);
$istyping.push(["set", "locale", "fr"]);      // a language code, "auto" for the browser's, null for your setting
$istyping.push(["set", "theme", "dark"]);     // "light", "dark" or "auto"
$istyping.push(["do", "card:show"]);          // show the launcher card now (also card:hide)

Listen to what happens in the widget:

function onMessage(message) { console.log("New reply", message); }
$istyping.push(["on", "message:received", onMessage]);   // also session:loaded, chat:opened, chat:closed,
                                                         // message:sent, availability:changed,
                                                         // card:shown, card:dismissed
$istyping.push(["off", "message:received", onMessage]);

After the widget has loaded, $istyping.get(...) reads "session:id", "chat:opened", "chat:unread", "availability", "locale" and "theme".

Look and behaviour

Colours, position, the team name and welcome texts, file uploads, email capture, ratings and the widget’s language are set under Settings → Widget appearance, and office hours under Settings → Availability — no code changes needed. Changes reach your site the next time a page loads.

Launcher card. Under Settings → Widget appearance → Launcher card you can put a small card beside the chat button: a headline, who’s there (online or away), and buttons to chat or search your help center. Show it when a visitor points at the chat button, or by itself a few seconds after each page loads. A visitor who closes it doesn’t see it again for a week. Phones always get the plain chat button. ["do", "card:show"] shows it from your own code (for example on a pricing page, even with the setting off); it never shows while the chat is open or on phones.

Installer le widget de chat

Paste the snippet

Tell the widget who your customer is (optional)

Control the widget from your page

Look and behaviour