Skip to content

Direqt | Integrating Webchat

This guide will show you how to embed an AI chatbot onto your site with a single line of code.

Locating Necessary Credentials

First, you'll need to locate your bot ID. Your bot ID can be found in the Direqt console within the "Chatbot Settings" tab.

Locating Chatbot ID

Adding The Embed Script

Now, 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&inject=true" async></script>

Note

Remember to replace YOUR_BOT_ID with your actual bot ID.

That's it! Your chatbot should now appear on your webpage.

Customizing Your Chatbot (Optional)

To customize your chatbot's appearance and behavior, you can use the direqt-webchat custom element. Add the custom element to your HTML file with your bot ID and any attributes you wish to customize.

For example:

<direqt-webchat bot-id="YOUR_BOT_ID" placement="bottom-left" start-hint="poll"></direqt-webchat>
will move your chatbot to the bottom left corner of your page and configure it to start conversations with poll questions.

The table below lists all supported attributes.

attribute accepted values description
bot-id (required) YOUR_BOT_ID Specify the ID of the bot you want to embed.
layout (optional) overlay, modal, fixed Specify how the chatbot will be displayed. If nothing is set, defaults to overlay.
  • overlay - A rectangular overlay interface fixed to the bottom right corner of the page. Begins hidden, activated by a floating circular icon.
  • modal - A larger overlay interface that takes up the majority of the page and darkens background content. Begins hidden, must be paired with a UI component for activation.
  • fixed - a 500px chatbot embedded inline on the page.
  • placement (optional) bottom-left Align the overlay layout to the bottom left of the page, rather than the default bottom right.
    bottom-padding (optional) integer Dictate how far from the bottom of the page the overlay layout will be placed.
    start-hint (optional) poll Chatbot will start conversations with a poll question instead of the standard welcome message.

    Tip

    If you're using the fixed layout, place the custom element where you want the chatbot to appear within your webpage.