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: 'http://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>

EDIT: This is now fixed. Merge config was not even needed. The Inject.css file was snapping the window back to it’s original pre-set size (which was 360px).

EDIT2: Nevermind. That solution was short lived since Botpress reset’s .css files everytime it starts back up. Still have same issue.

Changing the /data/assets/modules/channel-web/inject.css

bp-widget-side {
  top: 0px;
  left: auto;
  bottom: 0px;
  right: 0px;
  width: 100%; <-------Change from 360px to 100% like it's labeled here 
  height: 100% !important;
}

In the end, this was my script:

    <script>
      window.botpressWebChat.init({ 
        host: 'localhost:3000', 
        botId: 'test-bot',
        extraStylesheet: 'REMOVED FOR SECURITY PURPOSES',
        hideWidget: true
        });
      window.botpressWebChat.sendEvent({ type: 'show' });
    	window.botpressWebChat.sendEvent({
        type: 'proactive-trigger',
        channel: 'web',
        payload: { text: 'fake message' }
      })

    </script>

I’ll drop this here so it can be useful for the rest of the community.

With botpress > 12.1.5 you can achieve this pretty easily.

<!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>lolBot</title>
    <script src="http://localhost:3000/assets/modules/channel-web/inject.js"></script>
  </head>
  <body>
    <script>
      window.botpressWebChat.init({
        host: 'http://localhost:3000',
        botId: 'lolBot',
        hideWidget: true,
        disableAnimations: true
      })

      window.addEventListener('message', event => {
        if (event.data && event.data.name === 'webchatLoaded') {
          window.botpressWebChat.mergeConfig({
            containerWidth: '100%',
            layoutWidth: '100%'
          })
          window.botpressWebChat.sendEvent({ type: 'show' })
        }
      })
    </script>
  </body>
</html>

:v:

1 Like

It worked so thank you very much!! I would also like to add that semi-colons are needed after each window command since they seem cause issues in different browsers/websites. So it’s a must to ensure stability.

@av_botpress Could you give us more details about that? What error do you get and in which browser?

Our code styling enforces the removal of semi-colons, and it’s a lot more clean this way

The only issues I encounter is in IE with arrow-functions, which are not supported

Well that explains the issue I had with internet explorer. As for the other, chrome opens the web chat full screen but won’t render the proactive message. However, on Firefox, everything works well. Including the proactive message and full screen functionality. I’m starting to think it might be an issue with a the application the bot was hosted on. The bot is staged on an RHEL7 EC2 Instance and is implemented on Pega. The bot’s html page (one I summon the bot with) is used as a harness within pega.

As soon as I added semi-colons, all of the issues went away and the bot opened full screen. Without the semi colons, I still get errors and nothing works. But even with them, I have problems with Chrome.

Once again, Firefox loads everything flawlessly.
So I have two issues:

  1. Internet Explorer does not load the bot at all (which you mentioned was probably due to the arrow function, so I will re-test that.)
  2. Chrome will open the bot in full screen but will not show the proactive message.
    This is the error I get
    This could be a issue with the bot or Pega flagging what was sent and not allowing anything to process.

Edit: Chrome issue seems to have fixed itself and changing the arrow function to regular function syntax fixed the IE issue. Everything is resolved, thanks!

@av_botpress Thanks for the heads-up ! Yeah, we were getting some cryptic messages on IE because of array functions, so we try to keep the webchat js as vanilla as possible to avoid any issue (no destructuring, no arrow, etc…).

I doubt the chrome issue is about code issue since we never have any trouble and we use it constantly. When you get your SyntaxError, you can click on the link on the right and it’ll bring you where it spotted the error, it may give valuable informations