Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.servicebooked.ca/llms.txt

Use this file to discover all available pages before exploring further.

The ServiceBooked widget is a single <script> tag you paste into your website. It renders a chat bubble in the corner of every page, lets visitors talk to the AI, and captures every conversation as a contact in your dashboard.

​
Get the snippet

1

Open the Widget builder

From your dashboard, click Widget in the left nav.
2

Customize the look

Pick an accent color, a welcome message, and a header title. Live preview on the right shows what visitors will see. (More options on Customize the look.)
3

Save

Click Save. Customizations apply instantly — already-installed widgets pick up the changes on the next page load.
4

Copy the embed snippet

At the bottom of the Widget builder, click Copy embed code. You’ll get something like:
<script
  src="https://app.servicebooked.ca/widget.js"
  data-key="YOUR-PUBLIC-KEY"
  async
></script>
The key is unique to your organization. Don’t share it publicly — though if you do, the widget enforces an allowed-domains list so it can’t be misused on a random third-party site.
5

Paste it on your site

Add the snippet to every page you want the bubble on. Easiest: paste it just before </body> in your site’s main template. Specifics by platform are below.

​
Per-platform install

​
WordPress

Two routes:
  • Theme editor: Appearance → Theme File Editor → footer.php. Paste the snippet just before </body>. Save.
  • Plugin route (recommended if you don’t want to touch theme code): install Insert Headers and Footers by WPBeginner. Paste the snippet into the “Scripts in Footer” field.

​
Shopify

Online Store → Themes → Edit Code → theme.liquid. Paste just before </body>. Save.

​
Squarespace

Settings → Advanced → Code Injection → Footer. Paste. Save.

​
Wix

Settings → Advanced → Custom Code → Add Custom Code. Paste, set “Place Code in” to Body — End, and apply to All Pages.

​
Webflow

Project Settings → Custom Code → Footer Code. Paste. Publish.

​
Plain HTML / Hand-coded sites

Paste the snippet just before </body> in every HTML file (or in your shared layout/template if you have one). Done.

​
Framework apps (Next.js, React, Vue, etc.)

Pop the script into your root layout. For Next.js App Router: 
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://app.servicebooked.ca/widget.js"
          data-key="YOUR-PUBLIC-KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

​
Verify the install

Once installed, navigate to your site in a browser. The chat bubble should appear in the bottom-right corner within ~1 second of page load. Click it, send a test message, and look in your dashboard’s Inbox — you should see the conversation land within seconds.

​
Restrict to specific domains

By default, your widget will refuse to render on any domain except the ones you’ve allowed. Go to Widget → Allowed domains and add yourdomain.com (and www.yourdomain.com if you use it). Add localhost while you’re testing. This protects you against someone copying your snippet and embedding the widget on a different site.

​
Performance

The widget script is ~30 KB gzipped, loads asynchronously, and doesn’t block your page render. The bubble only loads its full UI when a visitor opens it, so the at-rest cost is minimal — zero impact on your Lighthouse / Core Web Vitals scores in our testing.

​
Privacy

The widget doesn’t track visitors across pages or fingerprint them. It uses a single anonymous visitor ID stored in their localStorage so a returning visitor sees the same conversation thread, nothing more. No third-party trackers, no marketing pixels.

​
Next

Customize the look

Color, copy, position, behavior — make it match your brand.

Add a web call button

Let visitors voice-call the AI right from the widget.