Custom site

Add chatbot embed code to a custom site

Install the widget on custom HTML, server rendered, React, Next.js, Astro, Laravel, Rails, Drupal, Joomla, HubSpot CMS, Duda, or similar sites.

Custom site

Before you start

Best for

Any website where your team controls the HTML layout, template, CMS theme, or tag insertion area.

Install location

Place the script once in the shared layout before the closing body tag, or in the CMS footer code field.

Custom HTML snippet

<script
  src="https://your-domain.com/widget.js"
  data-workspace-id="WORKSPACE_ID"
  data-chatbot-id="CHATBOT_ID"
  defer
></script>

Install

1Copy the widget snippetOpen the chatbot Embed page and copy the final script.
2Find the shared layoutUse the common footer, base template, app layout, CMS theme file, or tag manager that renders every public page.
3Paste before body closesAdd the script before the closing body tag. Keep the workspace id and chatbot id attributes unchanged.
4Deploy and verifyDeploy the site, open the live domain, and send a real test question through the widget.

Access

Add the production hostname.

Add www, staging, preview, and regional hostnames only if they load the widget.

For embedded apps inside another domain, allow the parent page hostname that runs the script.

Verify

Install the snippet only once. Duplicate scripts can create duplicate launchers or duplicate config requests.

Do not move the workspace id or chatbot id into public environment variables unless your build process preserves them in the script tag.

If a content security policy is enabled, allow the widget script domain and API requests from your app domain.

Next doc

Review visitor conversations, source references, context, image attachments, contacts, and captured leads.