Embed widget in your own website

Follow this guide to embed a custom AI chatbot widget in your own website.

Before you start, make sure you have the following information:

• Your Sendbird application ID. If you don't have an account, sign up on Sendbird Dashboard and create a new application.

To view the image in full screen, click on the

• Your Sendbird bot ID. If you don't have a bot, create one on Sendbird Dashboard under AI chatbot > Bot studio > Create bot. For further details on how to create a bot, you can see this page.

To view the image in full screen, click on the

1. Go to your Sendbird Dashboard and Copy code from the Embed Code popup modal.

• You can find it under AI Chatbot > Bot studio > Bot > Add to my website > Embed Code.

To view the image in full screen, click on the

2. Copy code from the Script tab of the Embed Code modal.

3. Find the </body> tag in the HTML code of your website.

4. Paste the code just above the </body> tag.

1. Install @sendbird/chat-ai-widget library.

npm install @sendbird/chat-ai-widget

2. Import ChatAiWidget and specify your Sendbird Application ID and its Bot ID in the <ChatAiWidget/> component.

import { ChatAiWidget } from "@sendbird/chat-ai-widget";
import "@sendbird/chat-ai-widget/dist/style.css";

const App = () => {
    return (
        <ChatAiWidget
            applicationId="APP_ID" // Your Sendbird Application ID
            botId="BOT_ID" // Your Bot ID
        />
    );
}

Note: You can also load this <ChatAiWidget/> component from an HTML file on your website. Refer to js-example.html for an example.

Your AI chatbot widget should now be visible and operational on the bottom right corner of your live website.

To view the image in full screen, click on the

If you need further assistance or additional customization, contact us.