GeniStudio Web Chat Widget - CDN Example

This example demonstrates how to use the GeniStudio Web Chat Widget directly from a CDN without any build tools or npm packages.

CDN Implementation

Simply include the script and CSS from a CDN like JSDelivr or unpkg:

        <!-- Include the CSS -->

        <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/genistudio-bot-widget@latest/dist/index.css">

        <!-- Include the JavaScript -->

        <script
        src="https://cdn.jsdelivr.net/npm/genistudio-bot-widget@latest/dist/index.cdn.js"></script>

Initialize the Widget

Initialize the chat widget by calling the global GeniStudioWebChat.initWebChat() function:

        <script>

        // Define configuration

        window.GeniStudioConfig = {

          apiUrl: 'http://localhost:3000/api/chatbot/stream',

          chatbotId: 'YOUR_CHATBOT_ID',

          chatbotName: 'GeniBot',

          position: 'bottom-right',

          buttonColor: '#0091ae' // Optional - this color will theme
        the entire widget

        };

        // The widget will auto-initialize when the script loads

        // Make sure your GeniStudio server is running on localhost:3000

        </script>

Control the Widget

Try the interactive buttons below to control the chat widget: