Install Quarito with an AI assistant

Add the Quarito live chat widget to my website.

This is my install code. Use it exactly as it is:
<script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>

What to do:
1. Find the one file that every page of my site shares: the main layout, root template, shared footer, app shell or index.html. Don't add the code page by page if there is a shared file.
2. Paste the install code once, on the line just above the closing </body> tag (or use the framework's way of adding a script there, listed below).
3. Load it only once. Don't put it inside a component that only shows on some pages or renders more than once. Don't add it to API routes, JSON responses, emails or admin-only pages.
4. Don't change the code. Keep the src address and the async attribute. Don't download or bundle the file, and don't install an npm package (there isn't one).
5. If my site sends a Content-Security-Policy header, allow https://chat.quarito.com in script-src, connect-src and img-src, add wss://chat.quarito.com to connect-src, and allow inline styles in style-src.

Where it goes, by framework:
- Plain HTML: above </body> in every page, or in the shared footer.
- PHP: above </body> in the shared footer file (for example footer.php), outside any <?php ?> block. If the HTML is printed with echo, echo the code in single quotes.
- WordPress: a wp_footer action in the child theme's functions.php, or above </body> in the child theme's footer.php.
- Laravel: above </body> in resources/views/layouts/app.blade.php.
- React with Vite or Create React App: above </body> in index.html.
- Next.js App Router: in app/layout.tsx, with next/script and strategy="afterInteractive". Pages Router: the same in pages/_app.tsx.
- Nuxt: app.head.script in nuxt.config.ts, with async: true and tagPosition: "bodyClose".
- Vue, Angular, Svelte, Solid: above </body> in index.html (SvelteKit: src/app.html).
- Astro: above </body> in the shared layout, with is:inline.
- Shopify: above </body> in layout/theme.liquid.

When you're done, tell me which file you changed and show me the line you added.

My website has signed-in customers. Show their name and email in my Quarito live chat with its JavaScript API. The Quarito install code is already on the site.

1. On the server, make a hash of the signed-in customer's email: HMAC-SHA256, with my secret key, as lowercase hex. Read the key from an environment variable called QUARITO_SECRET_KEY. Never put the key in the page, in browser code or in the repository.
2. On pages where a customer is signed in, give the chat their details in one of these two ways:
   a) Server-rendered pages: add data-name, data-email and data-hash attributes to the install code's script tag, escaped for HTML.
   b) From JavaScript: first add this queue line, so calls made before the chat loads aren't lost:
      window.Quarito = window.Quarito || { q: [], identify: function (o) { this.q.push(["identify", o]) }, open: function () { this.q.push(["open"]) } };
      then call Quarito.identify({ name: "…", email: "…", hash: "…" }).
3. Use the email exactly as it was hashed (same spelling, same capital letters). A wrong hash makes the chat ignore the name and email.
4. Do nothing for visitors who aren't signed in.

The Quarito live chat is installed on my website. Make my "Contact support" button open the chat.

Add this queue line once, before any call to Quarito:
window.Quarito = window.Quarito || { q: [], identify: function (o) { this.q.push(["identify", o]) }, open: function () { this.q.push(["open"]) } };

Then, when the button is clicked, call Quarito.open(). Keep the button working as a normal link for anyone without JavaScript. Don't install any package.