Identify signed-in customers (JavaScript API)

What it does

When customers log in to your website, the chat can tell your team who they are: their name and email show with the conversation, marked as verified. Your server proves it with a hash, so nobody can pretend to be someone else.

The chat also has two calls for your own buttons: Quarito.open() and Quarito.close().

Your secret key

Find it in Administration › Settings › JavaScript API. Keep it on your server, in an environment variable or a config file outside your web folder. Never put it in a web page, browser code or a code repository: anyone with it can pretend to be any of your customers.

Generate a new key if it ever leaks. Hashes made with the old key stop working, so customers aren't recognised until your server uses the new one.

Make the hash on your server

The hash is HMAC-SHA256 of the customer's email, with your secret key, as lowercase hex.

<?php
$hash = hash_hmac( 'sha256', $customer['email'], getenv( 'QUARITO_SECRET_KEY' ) );

import { createHmac } from "node:crypto";

const hash = createHmac("sha256", process.env.QUARITO_SECRET_KEY)
  .update(customer.email)
  .digest("hex");

import hmac, hashlib, os

hash = hmac.new(os.environ["QUARITO_SECRET_KEY"].encode(), customer.email.encode(), hashlib.sha256).hexdigest()

Pass the email exactly as you hashed it, with the same capital letters. If the hash doesn't match, the chat ignores the name and email, and the visitor chats as a guest.

Give the chat the customer's details

On server-rendered pages, put them on the install code itself:

<script src="https://chat.quarito.com/l/YOUR-SITE-ID.js"
        data-name="Jane Doe" data-email="[email protected]" data-hash="HASH_FROM_YOUR_SERVER" async></script>

From JavaScript, at any time, for example after a customer logs in. The install code loads without holding up your page, so add the queue line first: calls made before the chat arrives wait in it.

window.Quarito = window.Quarito || { q: [],
  identify: function (o) { this.q.push(["identify", o]) },
  open: function () { this.q.push(["open"]) } };

Quarito.identify({
  name:  "Jane Doe",
  email: "[email protected]",
  hash:  "HASH_FROM_YOUR_SERVER"
});

A PHP example with the details filled in from the session is in the PHP guide.

Open and close the chat

window.Quarito = window.Quarito || { q: [],
  identify: function (o) { this.q.push(["identify", o]) },
  open: function () { this.q.push(["open"]) } };

// A "Contact support" button
document.querySelector("#help-button").addEventListener("click", function () {
  Quarito.open();
});

// Close it
Quarito.close();

Reference

• Quarito.identify({ name, email, hash }) tells the chat who the visitor is. Without hash, the details aren't marked as verified.
• Quarito.open() opens the chat window, loading the chat first if needed.
• Quarito.close() closes the chat window.
• data-name, data-email, data-hash on the install code's script tag do the same as identify.