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.

On this page

Adding a custom Sendbird user ID to the widget