botpress full-screen bot not loading in NextJS 14

Question

When I load the bot, I follow the advice from the docs here for a react app.

Full screen fails. With this config:

window.botpressWebChat.init({
        composerPlaceholder: "Type a message...",
        botConversationDescription: "Chat with Spark",
        botId: "...",
        hostUrl: "https://cdn.botpress.cloud/webchat/v1",
        messagingUrl: "https://messaging.botpress.cloud",
        clientId: "...",
        lazySocket: true,
        botName: "Spark",
        frontendVersion: "v1",
        themeColor: "#2563eb",
        stylesheet: "https://webchat-styler-css.botpress.app/prod/code/a6c56444-9b37-4ab5-ac39-3f942ffaf7dc/v21986/style.css",
        containerWidth: "100%25",
        layoutWidth: "100%25",
        "hideWidget": true,
        "disableAnimations": true,

    });

However when I remove the full screen features, the bot loads fine:

window.botpressWebChat.init({
        composerPlaceholder: "Type a message...",
        botConversationDescription: "Chat with Spark",
        botId: "d102af87-d294-456a-8855-7b8ad0ebe445",
        hostUrl: "https://cdn.botpress.cloud/webchat/v1",
        messagingUrl: "https://messaging.botpress.cloud",
        clientId: "d102af87-d294-456a-8855-7b8ad0ebe445",
        lazySocket: true,
        botName: "Spark",
        frontendVersion: "v1",
        themeColor: "#2563eb",
        // stylesheet: "https://webchat-styler-css.botpress.app/prod/code/a6c56444-9b37-4ab5-ac39-3f942ffaf7dc/v21986/style.css",
        // containerWidth: "100%25",
        // layoutWidth: "100%25",
        // "hideWidget": true,
        // "disableAnimations": true,

    });

How can I load it full screen for NextJS 14 app router?

I'm using tailwind, NextJS 14 app router

Answer 1

It's because you're using the v1 version of their JS and right now full screen is only supported in v0. This is their full screen example:

// Import the Botpress WebChat JavaScript file
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
 
// Initialize the Botpress WebChat with the required parameters
<script>
    window.botpressWebChat.init({
        // Replace <your-bot-id> and <your-client-id> with your actual bot and client IDs
        "botId": "<your-bot-id>",
        "clientId": "<your-client-id>",
 
        // 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": "Test",
 
        // 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>
 

Please note that v0 is very plain-looking relative to v1 and may not support all features.

You can edit the stylesheet of the v1 version to make it wider, but it only works on the "Chat" tab of your dashboard within Botpress.com. The width will be truncated in any other environment... unless perhaps you embed their hosted chat as an iframe and allow CORS, but I haven't gone that route as I find it problematic.