Open bot full screen

How can I open up the bot full screen in a new window instead of have it embedded within an iframe?

Also, I cannot seem to find the index.js file in my botpress folder

Edit: I understand it will still be in an iframe but I need the bot to expand full screen versus in a limited space(right side) like it is by default.

Simply run botpress an then open

http://{YOUR_HOST}/lite/{BOT_ID}/?m=channel-web&v=Fullscreen

Say that I have a botpress instance running on localhost:3000 and that I have funny-lol bot

That url would look like http://localhost:3000/lite/funny-lol/?m=channel-web&v=Fullscreen

You can also access it via the admin UI.

@EFF No I need it to open full screen onto an html page (have the bot take up the whole page) on load. Like I need to call the bot in the html page but have no widget to click just open to the full screen size of the bot (exactly like the open chat method you mentioned)

Sorry I think I missed something, do you want to open the bot in a new window or you want to display the bot in full screen in the same html page.

In a new window you simply need to redirect the user to your bot’s channel web url. http://{YOUR_HOST}/lite/{BOT_ID}/?m=channel-web&v=Fullscreen.

If you want to have no widget and open a chat on the same html page but to take the whole page you’ll need to first initialize bp with fullScreen options

window.botpressWebchat.init({
  /* your configuration */
  containerWidth:'100%',
  layoutWidth: '100%'
})

Then if you want to show/hide the webchat programatically you can simply send events like the following

window.botpressWebChat.sendEvent({ type: 'show' })

For further information please refer to the docs here

1 Like

Thank you!!!
I wanted the bot to open in same window but full screen (take up whole page) instead of taking up 1/4 of screen like it is at default. The code you included fully answered my question.

:ok_hand: glad it helped.

@EFF I thought it would work but it isn’t. Could you please tell me which part is wrong in my code?

<!DOCTYPE html>
<html lang = "en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>ChatBot</title> <!--Website Tab Label-->
      <script src="http://localhost:3000/assets/modules/channel-web/inject.js"></script>

  </head>
    <!----------------------\/\/\/\/\/\/\/----BOTPRESS----\/\/\/\/\/\/\/------------------------------------------>
<body>
    <script>
      window.botpressWebChat.init({ 
        host: 'http://localhost:3000', 
        botId: 'bot',
        hideWidget: true,
        containerWidth: '100%',
        layoutWidth: '100%',
        extraStylesheet:'https://filename.css' 
        });
    </script>
    <script>
	window.botpressWebChat.sendEvent({type: 'show'});
    </script>
    <script>
        window.addEventListener('message', function(event) {
      if (event.data.name === 'webchatOpened') {
        window.botpressWebChat.sendEvent({
          type: 'proactive-trigger',
          channel: 'web',
          payload: { text: 'fake message' }
        })
      }
    })
    </script>
</body>
</html>

Error I get is

Edit: Seems to stem from containerWidth and layoutWidth

I doubt that you’re hosting a custom css file to this url. Pretty sure the error comes from there. + make sure your bot id is really “bot”.

As a general comment, you don’t have to create different <script> tags for all of your botpress related code, a sigle one would do.

Yeah I know, I just changed them for display purposes because the ID and css file are correct on my end. That didn’t seem to be the issue. Does the code you input work on your end?

Yes what I shared is working. From what I see, botpress is trying to parse or load an invalid URL

@EFF As soon as I remove the container width 100% and layoutwidth 100%, the bot works. Also, the sendEvent( {type:‘show’}) doesn’t open the bot. The only method that opens the bot for me right now is leaving the widget on and clicking on it.

@sylvain @allardy @EFF Any help on this? I really can’t figure this out.

@av_botpress Got it ! Just realized that containerWidth and layoutWidth to 100% wont work at initialization, to set containerWidth, the webchat needs to be initialized first. So please init first then use merge config. Here’s my updated version of the code. I added a timeout but that’s not necessary.
(you should not see the error anymore)
Hope it helps :v:

<script>
      window.botpressWebChat.init({
        host: "http://localhost:3000",
        botId: 'lolbot',
        hideWidget: true
      })
      window.setTimeout(function() {
        window.botpressWebChat.mergeConfig({
          containerWidth: '100%',
          layoutWidth: '100%'
        })
        window.botpressWebChat.sendEvent({ type: 'show' })
      }, 1500)
    </script>

@EFF It only works if you leave Timeout set to 1500 like you have put. If you remove it or change the timing to anything lower it doesn’t seem to show the chat bot window. Any reason why this isn’t working without timeout? Edit: Want to also mention that I don’t get any console errors but I just get a blank white page.

    <script>
      window.botpressWebChat.init({ 
        host: 'localhost:3000', 
        botId: 'bot',
        hideWidget: true
        });
        window.setTimeout(function(){
          window.botpressWebChat.mergeConfig({
          containerWidth: '100%',
          layoutWidth: '100%'
        })
        window.botpressWebChat.sendEvent({ type: 'show' });
      }, 100)
    	window.addEventListener('message', function(event) {
    	if (event.data.name === 'webchatOpened') {
    	     window.botpressWebChat.sendEvent({
             type: 'proactive-trigger',
             channel: 'web',
             payload: { text: 'fake message' }
           })
        }
      })
    </script>