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.

Building a mobile app? Use @quincer/react-native instead of the script tag — same agent, native iOS + Android UI, native voice. See the React Native SDK guide.

Script tag (any site)

Paste one snippet. WordPress, Wix, Squarespace, Webflow, Framer, Ghost.

Shopify Theme App

One-click install. No code editing required.

GoDaddy

Website Builder, Managed WordPress, or cPanel.

Single-page app

Imperative API for React, Vue, Svelte, Next.js.

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. In the panel below, the Manual embed tab is selected (the Shopify tab is the one-click path in the next section). The Persona for this page row lets you pin one persona to this snippet or leave Auto-detect (default) on so the widget matches the page URL against each persona’s patterns. The Embed code card holds the ready-to-paste snippet — click Copy, then drop it before </body>. Copy the full block:

Widget · Deploy

Manual embedShopify

Persona for this page

Choose which persona responds where you embed this code, or leave it on auto-detect.

Auto-detect (default) Sales Support

Embed code

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

Paste before </body>

Email to your developerCopy

The Manual embed tab of Widget → Deploy — the snippet already carries your live API key; Copy it or Email to your developer.

<!-- 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

Log in to WP Admin → Appearance → Theme File Editor, or install the free WPCode / Head & Footer Code plugin — the plugin is the safer route, because a theme update overwrites footer.php and takes the snippet with it.
Open your theme's footer.php (or the plugin's “Footer” slot).
Paste the snippet right above <?php wp_footer(); ?> or </body>.
Save and reload your site.

If the widget doesn't appear, flush your caching plugin (WP Rocket, W3 Total Cache, LiteSpeed) — a cached page still holds the old HTML. On GoDaddy Managed WordPress the same applies, via the GoDaddy menu in the admin bar. See GoDaddy.

Webflow

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

Squarespace

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

Wix

In your Wix dashboard open Settings → Custom Code (under Advanced).
Click + Add Custom Code, paste the snippet, and give it a name.
Set Add Code to Pages to All pages, and Place Code in to Body - end.
Click Apply.

Wix only allows custom code on a premium site with a connected domain — the Custom Code panel is disabled on free sites.

Framer

Open Site Settings → General → Custom Code.
Paste the snippet into the End of <body> tag field.
Publish your site.

Ghost

Open Settings → Advanced → Code Injection.
Paste the snippet into Site Footer — not Site Header, since it needs to load after the page.
Save.

Duda

In the side panel click More → Settings.
Paste the snippet into Body End HTML, which applies to every page.
Save and republish.

Custom stacks

Any other 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.).

GoDaddy is the exception. Its Website Builder sandboxes custom code in an iframe, so the snippet above will not float correctly. Use the GoDaddy instructions instead.

Do not use multiple snippets on the same page. Each page should embed the widget exactly once. If you want different personas per page, use a single snippet with the persona option set.

Shopify Theme App Extension

Shopify merchants get a purpose-built install that does not require editing theme code. The widget ships as a Theme App Extension called Quincer AI Associate.

Switch the deploy panel to its Shopify tab and it walks you through the four numbered steps below. Step 1 Your Shopify store takes your my-store.myshopify.com domain — it drives both of the next two steps; step 2 Install the Quincer app connects the store (it shows Installed instead when the app is already on that store); step 3 Turn on the app embed gives you a one-click Open theme editor link with Quincer AI Associate already switched on — click Save there and you're live. Step 4 Paste your API key and save appears only for stores without the app; with the app installed the key is detected automatically.

Deploy on Shopify

Manual embedShopify

Your Shopify store

my-store.myshopify.com

Install the Quincer app

Already installed on this store — nothing to do here

Installed

Turn on the app embed

Opens your theme editor with Quincer already switched on

Open theme editor

Paste your API key and save

Only for stores without the app — otherwise auto-detected

The Shopify tab of Widget → Deploy — enter your store domain, install the app, then open the theme editor with Quincer AI Associate already switched on.

In the dashboard, open Widget → Deploy and click Shopify.
Enter your permanent .myshopify.com domain (Shopify Admin → Settings → Domains). Your custom storefront domain won't work here — it can't carry the theme editor link.
Click Install on Shopify and approve the install. Your store is added to Quincer automatically, a widget is provisioned for it, and your product catalog is imported (and stays in sync as you add, edit, or remove products). No API key to copy or paste.
Click Open theme editor. This opens your theme with the Quincer app embed already switched on — click Save and the widget is live across your storefront.
!
Shopify leaves every app embed off until someone turns it on, so this step is required — the widget won't appear until you save the theme. If you ever need to do it by hand: Online Store → Themes → Customize → App embeds, toggle Quincer AI Associate on, then Save.
(Optional) To customize the look — accent color, position, or lock it to a specific Persona ID — expand Quincer AI Associate in the App embeds panel, adjust, and Save. Leave the API Key field blank; it's auto-detected for stores with the app installed.

“App embed does not exist”

If the theme editor opens with that message, the link was built for a different store or a different app. Re-open Widget → Deploy → Shopify, confirm the domain box holds the same .myshopify.com store you are editing, and use the Open theme editor button there rather than a saved or shared link. If it persists, make sure the Quincer app is still installed on that store under Settings → Apps and sales channels.

Targeting specific pages

By default the Quincer AI Associate 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 AI Associate block and set the Template scope in the right panel (e.g. Product, Collection).

Uninstalling

In the theme editor, delete the Quincer AI Associate app block and save. To fully uninstall the app, go to Shopify Admin → Apps → Quincer AI Associate → 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 AI 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.

GoDaddy

GoDaddy sells three different website products, and the install is different for each one. Work out which one you have before you copy anything — the snippet that works on GoDaddy’s drag-and-drop builder is not the standard snippet.

Which GoDaddy product do you have?

Sign in to GoDaddy and open My Products. The product name is listed there. If you are not sure, open your site’s editor and look at it:

What you see	Product	Follow
A drag-and-drop editor where you build pages by stacking sections	Websites + Marketing (a.k.a. Website Builder / Airo)	A — Website Builder
The WordPress admin dashboard (/wp-admin)	Managed WordPress	B — Managed WordPress
cPanel, or you upload your own .html files	Web Hosting / cPanel	C — cPanel hosting

A — Websites + Marketing (Website Builder)

Why this needs a special snippet. GoDaddy’s builder renders custom code inside a sandboxed <iframe>. The standard snippet would load the widget inside that box, so instead of floating in the corner of the page you would get a chat bubble stuck in a small rectangle in the middle of the page. The snippet below mounts the widget on the real page instead.

In Quincer, open Widget → Deploy and copy your API key from the Manual embed tab — the cw_live_… value. You only need the key, not the whole snippet.
In GoDaddy, go to My Products → Websites + Marketing → Edit Site.
Check for a site-wide slot first. Open Settings and look for Custom Code (sometimes shown as Header & Footer Code). If your plan has it, paste the snippet below there, save, publish, and you are done — it applies to every page at once. Most current plans no longer offer this. If you don’t see it, carry on with step 4.
Open the page you want the widget on, scroll to the bottom, and click Add Section.
Search for HTML and add the HTML / Custom Code section.
Set Code Type to HTML (not Markdown), then paste the GoDaddy snippet below into the code box, replacing cw_live_... with your key.
Click Done, then Publish.
Repeat steps 4–7 on every page you want the widget on. Sections in Websites + Marketing belong to a single page, so there is no way to add it everywhere in one go unless your plan has the Custom Code setting from step 3.

Paste this exactly — the only thing you change is the API key on the first line:

<!-- Quincer Chat Widget — GoDaddy Website Builder -->
<script>
(function () {
  var CONFIG = {
    apiKey: "cw_live_...",                      // ← your key from Widget → Deploy
    apiUrl: "https://chat.quincer.com/api"
  };

  // GoDaddy renders this block inside a sandboxed iframe. Climb to the highest
  // window we are allowed to touch so the widget mounts on the real page and
  // can float above it.
  var win = window;
  try {
    while (win.parent !== win && win.parent.document) win = win.parent;
  } catch (e) {
    // A cross-origin ancestor stopped us; `win` is the last usable window.
  }

  // Collapse the now-empty section so it leaves no gap on the page — but never
  // inside the GoDaddy editor, or the section becomes impossible to click again.
  // Checks the referrer too: when the editor's canvas is cross-origin, `win` is
  // the preview host rather than godaddy.com and the hostname alone misses it.
  try {
    var gd = /(^|\.)godaddy\.com$/;
    var inEditor = gd.test(win.location.hostname) ||
      (document.referrer && gd.test(new URL(document.referrer).hostname));
    if (!inEditor && window.frameElement) window.frameElement.style.display = "none";
  } catch (e) {}

  // Mount exactly once, even if this block ends up on the page twice.
  if (win.__quincerWidgetLoaded) return;
  win.__quincerWidgetLoaded = true;

  win.ChatWidgetConfig = CONFIG;
  var s = win.document.createElement("script");
  s.src = "https://chat.quincer.com/api/embed/widget.js";
  (win.document.body || win.document.head).appendChild(s);
})();
</script>

✓

How to check it worked. Publish, then open your live site in a normal browser tab — not the editor preview, which sandboxes things differently. The bubble should sit in the corner of the window and stay in the corner as you scroll. If it scrolls away with the page content, it is still trapped in the iframe: see the troubleshooting note below.

B — GoDaddy Managed WordPress

This is ordinary WordPress, so the standard snippet works and there is no iframe to work around. Follow the WordPress steps above — the free WPCode or Head & Footer Code plugin is the safest route because it survives theme updates.

GoDaddy Managed WordPress caches pages aggressively. After publishing, flush the cache from the GoDaddy menu in the WP admin bar (Flush Cache) or the widget may not appear for several minutes.

C — GoDaddy Web Hosting (cPanel)

If you maintain your own HTML files, add the standard snippet to each page’s markup.

Copy the standard snippet from Widget → Deploy → Manual embed.
In GoDaddy, open My Products → Web Hosting → Manage → cPanel Admin.
Open File Manager and go to public_html.
Right-click a page (for example index.html) and choose Edit.
Paste the snippet immediately before </body> and click Save Changes.
Repeat for each page, or add it to your shared footer include if you use one.

GoDaddy troubleshooting

Symptom	Cause and fix
Bubble appears in a box mid-page and scrolls away	The widget is still inside GoDaddy’s iframe — usually the standard snippet was pasted instead of the GoDaddy one. Replace the contents of the HTML section with the snippet above. If you already used it, GoDaddy has sandboxed the frame so tightly that the page cannot be reached; contact us and we will confirm against your site.
Nothing appears at all	The section was saved as Markdown rather than HTML, or the site was not republished. Re-open the section, switch Code Type to HTML, then Publish again.
Widget shows on one page only	Expected on Websites + Marketing — sections are per page. Add the HTML section to each page (step 8 above).
Two chat bubbles	GoDaddy Conversations (GoDaddy’s own chat) is switched on as well. Turn it off under Settings → Conversations, or remove the duplicate HTML section — the same page must never embed Quincer twice.
Chat button sits in the middle of the page, or drifts as the slider moves	A section of your theme carries a CSS `transform`, `filter` or `contain`, which makes the browser position the button inside that section rather than the browser window — so it lands over your hero image, scrolls with the page, and slides sideways as a carousel advances. The widget now detects this and moves itself out; make sure you are on the current version by hard-refreshing. If it persists, open the browser console — the widget logs the exact element and property responsible.
Changes don’t show up	GoDaddy caches published pages. Hard-refresh (`Ctrl`/`Cmd` + `Shift` + `R`) and re-check in a private window before assuming the install failed.

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

Method	Description
`ChatWidget.init(config)`	Mount the widget with the given config.
`ChatWidget.destroy()`	Unmount and remove all DOM + styles.
`ChatWidget.open()`	Programmatically open the chat panel.
`ChatWidget.close()`	Close the chat panel.

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

Field	Required?	Notes
`apiKey`	Yes	Starts with `cw_live_`. Generate from Widget → Deploy.
`apiUrl`	Yes	Your Quincer AI API base (e.g. `https://chat.quincer.com/api`).
`persona`	No	Pin a specific persona for this page. Otherwise URL patterns apply.

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