JSFiddle - React, Tailwind, and code Playground

by GordyNumberOne

HTML

<html>
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
 
<script>
    window.botpressWebChat.init({
        // Replace <your-bot-id> and <your-client-id> with your actual bot and client IDs
        "botId": "3a400c1e-2296-407a-ac82-fceb8989fac1",
        "clientId": "3a400c1e-2296-407a-ac82-fceb8989fac1",
 
        // Set the URL for the Botpress WebChat JavaScript file and the messaging server
        "hostUrl": "https://cdn.botpress.cloud/webchat/v0",
        "messagingUrl": "https://messaging.botpress.cloud",
 
        // Set the name of the bot that will be displayed in the WebChat interface
        "botName": "Helpful Bot",
 
        // Set the width of the WebChat container and layout to 100% (Full Screen)
        "containerWidth": "100%25",
        "layoutWidth": "100%25",
 
        // Hide the widget and disable animations
        "hideWidget": true,
        "disableAnimations": true,
    });
 
    // Opens up the Chatbot by default
    // This lets users start chatting with the Chatbot without needing to click any buttons or menus.
    window.botpressWebChat.onEvent(
        function () {
            window.botpressWebChat.sendEvent({ type: "show" });
        },
        ["LIFECYCLE.LOADED"]
    );
</script>
 
</html>