Add the widget to your website

Copy it from Widget settings in your dashboard. It looks like this, with your own key in place of wk_YOUR_KEY:

<div data-clientperch-key="wk_YOUR_KEY"></div>
<script src="https://www.clientperch.com/widget.js" async></script>

The first line marks where the scanner appears. The second loads it. Paste both together, in the body of the page where you want the scanner, not in the page's head. The widget sizes itself to fit and changes height as the visitor moves through it.

The widget is included from the Pro plan, trials too. Each scan a visitor runs uses one of your scans, so it shares your monthly allowance.

Hand-written HTML, PHP, or any other server language: paste the embed code into the page template where the scanner should appear. The language the site is built in does not matter, since the widget runs in the visitor's browser.

1. Open the page in the editor.
2. Add a block and choose Custom HTML.
3. Paste the embed code into it, then update the page.

On WordPress.com, the free and lower plans remove scripts from pages, so the widget will not load. You need a plan that allows custom code. Self-hosted WordPress has no such limit.

1. In the editor, open Add Elements, then Embed Code, and choose Embed HTML.
2. Paste the embed code into the code box and apply it.
3. Drag the box's handles to make it about 600px tall, and as wide as you like.

Wix puts embedded code inside a box of its own, with a fixed height. The widget cannot make that box grow, so if the form is cut off at the bottom, make the box taller in the editor.

1. Open the Add panel and drag a Code Embed element onto the page.
2. Paste the embed code, save, and publish.

Webflow only runs custom code on a published site with a paid site plan.

1. Edit the page and add a block where the scanner should appear.
2. Choose Code, paste the embed code, and save.

Squarespace's entry plan does not run JavaScript in Code blocks. You need one of the plans above it.

1. Go to Online Store, then Themes, and click Customize.
2. Add a section and choose Custom Liquid.
3. Paste the embed code into it and save.

1. Insert an Embed component and set it to HTML.
2. Paste the embed code. Give the component enough height for the form, about 600px.

In the GoDaddy website builder, add an HTML section and paste the embed code. On Carrd, add an Embed element, which needs a Pro plan.

GoDaddy holds embedded code in a fixed-height box, as Wix does. If the form is cut off, make the section taller.

React does not run a script tag pasted straight into a component, so the script has to be loaded properly. Sites made with Lovable, Bolt, v0, or Replit are React underneath: the easiest route is to give the builder this instruction, with your own embed code:

Add the ClientPerch website scanner to this page. Render
<div data-clientperch-key="wk_YOUR_KEY"></div> where it should appear,
and load https://www.clientperch.com/widget.js once on the page (with next/script in
Next.js, or by adding a script tag in a useEffect in React).

Or by hand, in Next.js:

import Script from "next/script";

export function Scanner() {
  return (
    <>
      <div data-clientperch-key="wk_YOUR_KEY" />
      <Script src="https://www.clientperch.com/widget.js" strategy="lazyOnload" />
    </>
  );
}

And in plain React:

import { useEffect } from "react";

export function Scanner() {
  useEffect(() => {
    if (document.querySelector('script[src="https://www.clientperch.com/widget.js"]')) return;
    const script = document.createElement("script");
    script.src = "https://www.clientperch.com/widget.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);
  return <div data-clientperch-key="wk_YOUR_KEY" />;
}

The widget notices containers added after the page loads, so it also appears when a visitor moves between pages without a full reload.

Nothing appears. Check that both lines were pasted, and into the page body rather than the head. Some builders remove scripts on lower plans; see your platform above. The widget also hides itself if it has been switched off in Widget settings, or if the account that owns it is no longer on a plan that includes it.

"This scanner is not enabled for this website." The widget has a list of allowed domains in Widget settings, and this site is not on it. Add the domain, or clear the list to allow any site.

The form is cut off at the bottom. The page builder is holding the widget in a fixed-height box (Wix, GoDaddy, Framer). Make that box taller in the editor.

A company site with a strict security policy. If the site sends a Content-Security-Policy header, it must allow https://www.clientperch.com in both script-src and frame-src. Small business site builders do not set one, so this mostly concerns custom corporate sites.