How to open as sidebar vs fullscreen?

(Perry Lawrence) #1

My web bot widget is opening fullscreen by default. I am able to change some parameters using the FxoMessenger.setConfig (like color and heading) but I am not able to get the window to open as a sidebar.

I have tried:
fullscreen: false
sidebar: true
mode: ‘sidebar’
Any ideas?

Here is my current setup:

<script>
  function messengerReady() {
    // Wait until the messenger is fully
    // ready, then send a message
    FxoMessenger.on('stateChanged', function(state) {
      if (state === 'connected') {
        FxoMessenger.sendMessage('Hey!');
      }
    });

    // Subscribe to all messages received,
    // logging them to the console
    FxoMessenger.on('messageReceived', function(message) {
      console.log(message);
    });
// Set the messenger to open fullscreen
FxoMessenger.setConfig({
headerText: 'Chat to Us',
  color: '#4B0082',
  mode: 'sidebar'
});

  }
</script>
<script src="https://widget.flowxo.com/embed.js?callback=messengerReady" async defer data-fxo-widget="my-code"></script>
(Perry Lawrence) #2

It is working on another install. Seems there is a conflict wth my theme. Sorry to bother.

(Enchiridion) #3

Just wanted to add that I had a similar issue. Turned out I had a global iframe style that was setting all my iframes to 100% wide, which was making the chat window full screen since it’s an iframe. It was also affecting the layout of popup mode too.

I added this to our SCSS:

.fxo-messenger-iframe {
  width: 100%;

  @include media(22) {
    width: 40%;
    min-width: 450px;
    max-width: 600px;
  }
}

Which makes it fullscreen for small screens but a sidebar for larger screens.

Note that @include media(22) is part of our custom responsive mixin, so you’ll have to replace it with the equivalent for whichever framework you’re using.

1 Like