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.

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" async></script>

Note

Remember to replace YOUR_BOT_ID with your actual bot ID.

Adding Your Chatbot¶

Next, use the direqt-webchat custom element to place your chatbot onto the page. Add the custom element to your HTML file with your bot ID and any attributes you wish to customize. If you're using the fixed layout, place the custom element where you want the chatbot to appear within your webpage.

For example:

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

The table below lists all supported attributes.

attribute	accepted values	description
`bot-id` (optional)	`YOUR_BOT_ID`	Specify the ID of the bot you want to embed. If not set, the bot ID will be taken from the `id` query parameter in the script tag.
`layout` (required)	`overlay`, `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. `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.