AI Chatbot Guide v1
AI Chatbot
Version 1
Overview
Copy link
This guide provides step-by-step instructions for customizing the Sendbird AI chatbot widget using CSS, JavaScript, and HTML snippets. This will allow you to seamlessly integrate the chatbot into your website's design and enhance enhance its functionality with minimal coding.
Learning outcomes
Copy link
- Customize the appearance and behavior of the chatbot widget.
- Implement CSS, JavaScript, and HTML snippets for quick customization.
- Apply best practices for chatbot widget integration.
Widget testing tip
Copy link
To preview widget changes:
- Use this HTML testing tool.
- Go to AI chatbot > Manage bots > your bot > Add to my website > Embed code and click Copy code on Sendbird Dashboard.
- If you don't have an account, sign up on Sendbird Dashboard and create a new application. Then, create a bot under AI chatbot > Manage bots > Create bot.
-
Paste the copied code within the
<body> copied code </body>tag. -
Run and see your chatbot widget on the right.
Available customizations
Copy link
The following is the list of available customizations.
Basic widget customization
Copy link
- Change widget position
- Resize the chat window
- Customize button appearance
- Update "Enter Message" text
- Set time display to your locale
- Custom container and stacking
Display and interaction control
Copy link
- Display custom tooltip above the chatbot button
- Customize auto-open behavior
- Control link behavior
- Limit widget on specific pages
- Disable message entry in Chat
- Display chat window without button
Advanced options
Copy link
On this page