AI Chatbot Guide v1
AI Chatbot
Version 1
This section covers advanced customization features to help you get even more out of your chatbot widget. Each option is explained step-by-step so you can tailor your chatbot experience to match the needs of specific pages, users, and apps.
By default, the chatbot widget generates random user IDs with a widget prefix. For a more personalized experience—like keeping chat history unique to each user—customers can set up specific Sendbird users with unique IDs and issue session tokens. This lets each user have a personalized chat experience while maintaining security.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<!-- Load React first and then ReactDOM. Ensure these versions are compatible -->
<script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<!-- Load chat-ai-widget script -->
<script>
window.process = { env: { NODE_ENV: 'production' } };
</script>
<script crossorigin src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"></script>
<link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" />
<!-- Optional; to enable JSX syntax -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#aichatbot-widget-close-icon {
display: none;
}
</style>
</head>
<body>
<!-- div element for chat-ai-widget container -->
<div id="root"></div>
<!-- Initialize chat-ai-widget and render the widget component -->
<script type="text/babel">
const { ChatWindow } = window.ChatAiWidget;
const USER_ID = "SENDBIRD_USERID";
const SESSION_TOKEN = "TOKEN";
const APPLICATION_ID = "APP_ID";
const BOT_ID = "onboarding_bot";
const configureSession = () => ({
onSessionTokenRequired: (resolve, reject) => {
console.log("Session token required");
// Directly resolve with the existing session token
resolve(SESSION_TOKEN);
},
onSessionRefreshed: () => {
console.log("Session refreshed");
},
onSessionError: (err) => {
console.error("Session error:", err);
},
onSessionClosed: () => {
console.log("Session closed");
},
});
const App = () => {
return (
<ChatWindow
userId={USER_ID}
sessionToken={SESSION_TOKEN}
applicationId={APPLICATION_ID}
botId={BOT_ID}
configureSession={configureSession}
/>
);
};
ReactDOM.createRoot(document.querySelector('#root')).render(<App />);
</script>
</body>
</html>
</body>
</html>
USER_ID
and SESSION_TOKEN
: These values are specific to each user and should be dynamically generated. USER_ID
could be a login ID, and SESSION_TOKEN
should be generated by Sendbird’s system to keep the session secure.
- Make sure you have created Sendbird users with issue_access_token set to
true
in the Sendbird dashboard, as each user will need a valid access token to connect uniquely.