Install the widget

One line of HTML on every page. Here is where to put it on the most common platforms.

The snippet

<script src="https://bridgechat.app/widget.js" data-bridge-key="pk_YOUR_KEY" async></script>

Replace pk_YOUR_KEY with your website key, from Settings → Websites → your site → Install. Each website has its own key.

Any website

Paste the snippet just before the closing </body> tag of every page (or of your shared template or footer).

Next.js

In the root layout, so it loads once for the whole site:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://bridgechat.app/widget.js" data-bridge-key="pk_YOUR_KEY" strategy="afterInteractive" />
      </body>
    </html>
  );
}

React, Vue, Svelte and other single-page apps

Add the snippet to your index.html. Page changes are tracked automatically, including client-side navigation.

WordPress

1. Install the free WPCode plugin (Plugins → Add new).
2. Go to Code Snippets → Header & Footer and paste the snippet in Footer.
3. Save.

Shopify

1. Online Store → Themes, then … → Edit code on your live theme.
2. Open layout/theme.liquid and paste the snippet just before </body>.
3. Save.

Webflow

Site settings → Custom code → Footer code, paste the snippet, save, then publish your site.

Wix

Settings → Custom code → Add custom code. Paste the snippet, choose All pages and Body - end, then apply.

Google Tag Manager

Create a Custom HTML tag with the snippet, trigger it on All Pages, and publish the container.

Check that it works

• The chat button appears at the bottom right of your site.
• In Bridge, the Visitors page shows you browsing, live.
• Get started in Bridge marks the "Install the widget" step as done.

Content Security Policy

If your site sends a Content-Security-Policy header, allow Bridge in two directives:

script-src https://bridgechat.app;
frame-src https://bridgechat.app;