Get started

Install the widget

The widget is a single vanilla-JS file with no dependencies. Pick the install path that matches your site. Any approach gives you the same agent, the same dashboard, the same integrations.

Script tag (any website)

Go to Widget → Deploy in the dashboard and keep the tab open — the snippet there already contains your live API key. Copy the full block:

<!-- Quincer Chat Widget -->
<script>
  window.ChatWidgetConfig = {
    apiKey: "cw_live_...",
    apiUrl: "https://chat.quincer.com/api"
  };
</script>
<script src="https://chat.quincer.com/api/embed/widget.js" defer></script>

Paste it immediately before </body> on every page you want the widget to appear.

WordPress

1. Log in to WP Admin → Appearance → Theme File Editor, or install the free WPCode / Head & Footer Code plugin.
2. Open your theme's footer.php (or the plugin's “Footer” slot).
3. Paste the snippet right above <?php wp_footer(); ?> or </body>.
4. Save and reload your site.

Webflow

1. Open Site Settings → Custom Code.
2. Paste the snippet into Footer Code.
3. Click Save Changes, then publish your site.

Squarespace

1. Open Settings → Advanced → Code Injection.
2. Paste the snippet into the Footer field.
3. Save.

Framer, Wix, Ghost, and custom stacks

Any platform with a “custom footer code” or “HTML embed” slot will accept the snippet. For fully custom stacks, add it to your base template (_document.tsx, layout.tsx, _layout.html, etc.).

Shopify Theme App Extension

1. In the dashboard, open Widget → Deploy and click Shopify.
2. Click Install Quincer Chat on Shopify. This opens the Shopify App Store install flow for your store.
3. Approve the app install. You are returned to Quincer.
4. Back on the Deploy page, copy your API key.
5. Enter your store domain (e.g. my-store.myshopify.com) and click Open Theme Editor. This opens the editor with the Quincer Chat block pre-activated.
6. In the theme editor's right panel, paste your API key into Quincer Chat → API Key. Optionally set accent color, position, or lock it to a specific Persona ID.
7. Click Save in the theme editor. The widget is live across your storefront.

Targeting specific pages

By default the Quincer Chat block appears everywhere. If you want it only on product pages or only on a collection, use Shopify's app block targeting: in the theme editor, select the Quincer Chat block and set the Template scope in the right panel (e.g. Product, Collection).

Uninstalling

In the theme editor, delete the Quincer Chat app block and save. To fully uninstall the app, go to Shopify Admin → Apps → Quincer Chat → Uninstall.

Alternative: theme.liquid snippet

Prefer to drop a script tag directly into your theme? Paste this into theme.liquid right before the closing </body> tag. The data-shop attribute gives Quincer your store context (product titles, prices, cart state) so the agent can reference what the visitor is viewing.

<!-- In theme.liquid, just before </body> -->
<script src="https://chat.quincer.com/api/embed/widget.js"
        data-api-key="your_api_key"
        data-shop="{{ shop.permanent_domain }}"></script>

See /shopify for Shopify-specific use cases (cart recovery, wholesale qualification) and the comparison against Inbox, Gorgias, Tidio, and Intercom.

Single-page applications

React Router, Next.js App Router, Vue Router, and similar SPAs don't reload the page between routes. The script tag still works, but you may want to control the widget imperatively.

Load once, then mount

<!-- In your base HTML -->
<script src="https://chat.quincer.com/api/embed/widget.js" defer></script>

// In your root component
useEffect(() => {
  window.ChatWidget?.init({
    apiKey: "cw_live_...",
    apiUrl: "https://chat.quincer.com/api",
    brand: "Acme",
    persona: "persona_prod_xyz", // optional
  });
  return () => window.ChatWidget?.destroy();
}, []);

Public API

Route-aware personas

Either call destroy() + init() on route change with a new persona, or leave persona unset and configure URL patterns per persona from the dashboard. See URL routing.

All three init methods

The widget supports three equivalent ways to pass config. Pick whichever fits your setup.

1. Global config (recommended)

<script>
  window.ChatWidgetConfig = { apiKey: "cw_live_...", apiUrl: "..." };
</script>
<script src="https://chat.quincer.com/api/embed/widget.js" defer></script>

2. Data attribute

<script
  src="https://chat.quincer.com/api/embed/widget.js"
  data-config='{"apiKey":"cw_live_...","apiUrl":"..."}'
  defer></script>

3. Imperative

<script src="https://chat.quincer.com/api/embed/widget.js" defer></script>
<script>ChatWidget.init({ apiKey: "cw_live_...", apiUrl: "..." });</script>

Required config

Every other field (brand, colors, welcome message, position) is pulled automatically from your dashboard config on page load. See Customize for full knobs.