Direqt | Integrating Webchat¶

This guide will show you how to embed an AI chatbot onto your site.

Locating Your Bot ID¶

Your bot ID can be found in the Direqt console within the "Chatbot Settings" tab.

Adding The Embed Script¶

Place the following script tag in either the <head> or <body> section of your HTML file:

<script type="module" src="https://embed.direqt.ai/embed.js?id=YOUR_BOT_ID" async></script>

Note

Replace YOUR_BOT_ID with your actual bot ID.

Warning

The script must include type="module". It will not work as a regular script.

Adding Your Chatbot¶

Use the direqt-webchat custom element to place your chatbot onto the page.

<direqt-webchat bot-id="YOUR_BOT_ID" layout="fixed"></direqt-webchat>

If you omit the <direqt-webchat> element, the embed will automatically inject one with modal layout.

Supported Attributes¶

attribute	accepted values	description
`bot-id` (optional)	`YOUR_BOT_ID`	The bot to embed. If not set, uses the `id` from the script tag.
`layout` (optional)	`modal`, `overlay`, `fixed`	How the chatbot is displayed. Defaults to `modal`. See Layouts below.
`placement` (optional)	`bottom-left`	Align the overlay to the bottom left instead of the default bottom right.
`bottom-padding` (optional)	integer	Distance in pixels from the bottom of the page (overlay layout only).
`start-hint` (optional)	`poll`	Start conversations with a poll question instead of the standard welcome.

Layouts¶

modal (default) — A centered lightbox overlay with a dark backdrop. The chat is hidden until activated by a Text Button or Floating Button.

overlay — A floating circular icon anchored to the bottom corner of the page. Clicking the icon expands the chat into a panel. Includes a message preview bubble.

fixed — The chatbot fills its container element. Use this when embedding the chat inline within your page layout.

Complete Example¶

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://embed.direqt.ai/embed.js?id=YOUR_BOT_ID" async></script>
  </head>
  <body>
    <h1>My Website</h1>

    <!-- Option A: Explicit placement with fixed layout -->
    <direqt-webchat layout="fixed"></direqt-webchat>

    <!-- Option B: Overlay layout (or omit for auto-injected modal) -->
    <direqt-webchat layout="overlay"></direqt-webchat>
  </body>
</html>

Migrating From Legacy Embed¶

If your site uses the legacy embed format with <ins class="direqt-embed">, you need to update to the current format. The legacy format is no longer supported.

Old format (no longer supported):

<!-- ❌ This no longer works -->
<script src="https://chat.direqt.ai/embed.js?pubId=YOUR_PUB_ID" async></script>
<ins class="direqt-embed"
     data-bot-id="YOUR_BOT_ID"
     data-layout="overlay">
</ins>

New format:

<!-- ✅ Use this instead -->
<script type="module" src="https://embed.direqt.ai/embed.js?id=YOUR_BOT_ID" async></script>
<direqt-webchat layout="overlay"></direqt-webchat>

Key changes:

Script URL: Change from chat.direqt.ai/embed.js to embed.direqt.ai/embed.js
Script type: Add type="module" (required)
Bot ID: Move from data-bot-id attribute to the id query parameter on the script URL
Element: Replace <ins class="direqt-embed" data-...> with <direqt-webchat ...>
Attributes: Remove the data- prefix (data-layout → layout, data-placement → placement, etc.)