Embed Fullscreen Chatbot
# 📖tutorials
b
Video version of this tutorial:

https://youtu.be/y5a9tfZAZGM

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:
Copy code
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/
j
@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 ?
im thinking about building a product websie
b
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 🙂
j
1 sec
im going to show you an example :))
like this
it displays on a page and you can talk with it 🙂
like a live preview
b
yep, so that's called embedding
give one of our embedding tutorials a shot - you just take the code and pop it on your webpage
j
can you have multiple bots on 1 website ?
f
@bumpy-butcher-41910 this doesn't work with v1 of your platform anymore. The bot can't be loaded in full screen mode.
i
@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.