Whizchat
Log inSign up
Documentation
Browse documentation

Install the chat widget

Add Whizchat to your site with a coding agent, one script tag, or the npm package. Steps for WordPress, Shopify, Webflow, Squarespace and Wix.

Your own snippet, with your site ID already in it, is in the dashboard under Settings → Installation.

With a coding agent

The quickest way if your site is code you or your team work on.

  1. In the dashboard, open Settings → Installation and copy the prompt. It carries your site ID.
  2. Paste it into Claude Code, Cursor, Copilot or any agent working in your site's repository.
  3. It picks the right method for your stack: the npm package for a single-page app, or the script tag for anything server-rendered or static. It is told not to build any chat interface of its own, because appearance, hours and knowledge all live in the dashboard.

With the script tag

One line, on every page that should show chat, just before the closing </body> tag.

<script src="https://widget.whiz.chat/loader.js" data-site-id="YOUR_SITE_ID" defer></script>

Replace YOUR_SITE_ID with yours, or copy the finished tag from the dashboard. Add it once per page. In a template-based site that usually means the shared footer or layout file, so one edit covers every page.

WordPress

  1. Install a header and footer code plugin, such as WPCode.
  2. Paste the script tag into its site-wide footer box and save.
  3. On a theme you maintain yourself, you can instead paste it into footer.php, just before </body>.

Shopify

  1. In your admin, open Online Store, Themes, then Edit code on your live theme.
  2. Open layout/theme.liquid and paste the tag just before </body>.
  3. Save. It appears on every page of the store.

Webflow

  1. Open Site settings, then Custom code.
  2. Paste the tag into Footer code, save, and publish the site.
  3. Custom code needs a paid site plan.

Squarespace

  1. Open Code Injection. Search your site's settings for it: where it lives depends on your Squarespace version.
  2. Paste the tag into the Footer box and save.
  3. Code Injection is only available on plans that include it.

Wix

  1. Open Settings, then Custom code, and choose Add custom code.
  2. Paste the tag, apply it to all pages, and place it in "Body - end".
  3. Custom code needs a premium plan with a connected domain.

In a single-page app

React, Next.js, Vue, Svelte, Angular and the like. Use the package instead of the tag, never both.

npm install @whiz.chat/js

import { boot } from "@whiz.chat/js";

boot({ siteId: "YOUR_SITE_ID" });

Call boot once when the app starts. In React, do it from a useEffect in the root layout and return destroy() as the cleanup. Booting twice does nothing, so it is safe under StrictMode.

Check it worked

Load any page of your site with the snippet on it, then look at Settings → Installation.

It ticks over on its own

The dashboard shows Installed within a few seconds of the first page load on your site. Nobody needs to send a message first.

Previewing from the dashboard doesn't count

Only a page on your own domain marks it installed, so a test from inside Whizchat can't give a false tick.

Nothing appears

Check the site ID in the tag matches the one in your dashboard, and that the page you are looking at is one the tag was added to. Site builders often need the site republished before custom code goes live.

Your site sends a Content-Security-Policy

Allow https://widget.whiz.chat in script-src, connect-src and frame-src. The loader comes from there, fetches your settings from there, and opens the chat in a frame served from there.

Two chat buttons

The tag is on the page twice, or a single-page app is loading both the tag and the package. Keep one.