Video version of this tutorial: If you followed Gordy's previous tutorial, this should look very familiar. We are triggering the bot in the exact same way: But when we embed the bot in our website, we will not be using the preconfigured code. We won’t even be using the configured code! Instead, we’ll be using some code from our documentation: https://botpress.com/docs/cloud/webchat-customization/full-screen-bot/ After you copy/paste that code into your website, you’ll need to add in your bot’s own botId and clientId. I think the easiest place to find these numbers is actually back in the webchat integration in the “configurable” section. Now the bot is embedded into your website, but its still hiding behind the webchat button until the user clicks it. Let’s add some code to our website that tells the bot to show itself as soon as the web chat is loaded:

jsx
window.botpressWebChat.onEvent(
        function () {
            window.botpressWebChat.sendEvent({ type: "show" });
        },
        ["LIFECYCLE.LOADED"]
    );

This code: - Waits for the web chat widget to experience an event called “LIFECYCLE.LOADED” - Sends an event of type “show” to Botpress Finally, when you refresh your webpage, the bot should open in fullscreen and speak first after a short delay. You can find the website used in the video here: https://jsfiddle.net/GordyNumberOne/tej6shv7/

@bumpy-butcher-41910 (sorry for the ping man) how can i make the bot display on a page ? and can i have multiple bots display on differant pages ?

I'm not sure what you mean by display on a page @jolly-policeman-82775 - but our various tutorials on embedding a chatbot should cover that 🙂

1 sec

yep, so that's called embedding

can you have multiple bots on 1 website ?

@bumpy-butcher-41910 this doesn't work with v1 of your platform anymore. The bot can't be loaded in full screen mode.

@bumpy-butcher-41910 is there a option to embed the the chatbot to the a popup widget? with custom size? cause I'm trying to embed a demo chatbot to my wordpress website using custom code widget but it always goes to full screen and some of it is under by header. I was wondering if its possible to change the size and make sure it stays inside the container.