Advanced options

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.

Advanced session configuration guide

If you need more control over session management or are building an enterprise application, check out our Advanced session configuration guide which covers:

Custom token generation
Advanced error handling
TypeScript integration
Security best practices
API integration details

On this page

Adding a custom Sendbird user ID to the widget Advanced session configuration guide