Add the chat widget to your site

The install is one script tag. This guide covers where to paste it on the most common stacks, and the one setting that gates it: your domain allowlist.

Before you start

You need a workspace and its site key. Find both in the dashboard under Site keys — the embed snippet there already has your real key filled in, with a copy button. The snippet below uses a placeholder.

the embed snippet

<script async src="https://chat.doorwick.com/widget.js?v=3"
  data-site-key="ck_your_site_key"></script>

The async attribute means the widget never blocks your page. The loader is under 5 KB and the chat UI only loads when a visitor opens it.

Plain HTML

Paste the snippet just before the closing </body> tag of every page that should show the widget — or in a shared footer include if you have one.

index.html

  <!-- your page content -->

  <script async src="https://chat.doorwick.com/widget.js?v=3"
    data-site-key="ck_your_site_key"></script>
</body>
</html>

Rails

Add it to your layout so every page gets it:

app/views/layouts/application.html.erb

  <%# just before </body> %>
  <script async src="https://chat.doorwick.com/widget.js?v=3"
    data-site-key="<%= Rails.application.credentials.doorwick_site_key %>"></script>
</body>

The site key is public (it's visible in your page source by design), so a plain string works too — credentials just keep environments tidy.

Next.js (App Router)

Use next/script in your root layout:

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://chat.doorwick.com/widget.js?v=3"
          data-site-key="ck_your_site_key"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

WordPress

Either paste the snippet into your theme's footer.php right before </body>, or use any "insert headers and footers" plugin and add it to the footer section. Avoid pasting it into a single post — you want it site-wide.

Shopify

In your admin: Online Store → Themes → Edit code, open layout/theme.liquid, and paste the snippet just before </body>. Connecting Shopify for order lookup is a separate owner setting and never injects this snippet — see Connect Shopify.

Allow your domain

The widget only boots on domains you've allowlisted for the site key. Add every origin that embeds it — https://example.com, https://www.example.com if you serve both — in the dashboard under Site keys → Allowed origins.

Widget not appearing? Open your browser console: a 403 on /widget/session means the page's origin isn't on the allowlist yet. See Allowed origins, explained.

Disable the widget from the host page

The snippet can stay in a shared layout even when a page should not show chat. Set window.doorwickSettings.disabled to true before the script runs, or add data-doorwick-disabled="true" on the script tag. Either one unmounts the launcher and skips the handshake — no bubble, no iframe, no conversation.

disable on this page

<script>
  window.doorwickSettings = Object.assign(window.doorwickSettings || {}, { disabled: true });
</script>
<script async src="https://chat.doorwick.com/widget.js?v=3"
  data-site-key="ck_your_site_key"></script>

The boolean must be exactly true; the attribute must be the string true. Set window.doorwickSettings.debug to true to log each path's visibility decision in the console.

To hide the widget on many URLs at once, use path rules under Widget → Visibility — see Widget conversations.

Verify it works

Load your site: the launcher bubble appears bottom-right. Send yourself a message — it lands in your Doorwick inbox in real time, and if you've connected an AI provider and added knowledge, the reply comes with a citation.