Embed widget in your own website
Follow this guide to embed a custom AI chatbot widget in your own website.
AI agents are here; Go beyond AI chatbots and reimagine AI customer service with an AI agent platform that allows you to create AI agents that not only chat but think and act to resolve complex customer requests.
Prerequisite
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.
- 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.
Embedding script to HTML code
- 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.
-
Copy code from the Script tab of the Embed Code modal.
-
Find the
</body>
tag in the HTML code of your website. -
Paste the code just above the
</body>
tag.
Implement widget using React
- Install
@sendbird/chat-ai-widget
library.
- Import
ChatAiWidget
and specify your SendbirdApplication ID
and itsBot ID
in the<ChatAiWidget/>
component.
Note: You can also load this
<ChatAiWidget/>
component from an HTML file on your website. Refer to js-example.html for an example.
Finished View your live website
Your AI chatbot widget should now be visible and operational on the bottom right corner of your live website.
If you need further assistance or additional customization, contact us.