How can I make my popup interface full-screen?

Hey, how can I make my chat-interface full screen after pressing the button? Any tips appreciated

3 Replies

Here are two easy ways to turn the Voiceflow chat popover / widget into a full-screen experience after the visitor clicks a button: --- 1. Use the embed render-mode and grow it to the viewport

<!-- your launch button -->
<button id="open-chat">Chat full screen</button>

<!-- Voiceflow snippet  -->
<script>
  window.voiceflow.chat.load({
    verify: { projectID: 'YOUR-PROJECT-ID' },
    url: 'https://general-runtime.voiceflow.com',
    versionID: 'production',
    assistant: {
      type: 'chat',
      renderMode: 'embed',   // inline instead of bubble
    }
  });

  // open the chat when the button is pressed
  document.getElementById('open-chat').addEventListener('click', () => {
    window.voiceflow.chat.open();
  });
</script>

<!-- your launch button -->
<button id="open-chat">Chat full screen</button>

<!-- Voiceflow snippet  -->
<script>
  window.voiceflow.chat.load({
    verify: { projectID: 'YOUR-PROJECT-ID' },
    url: 'https://general-runtime.voiceflow.com',
    versionID: 'production',
    assistant: {
      type: 'chat',
      renderMode: 'embed',   // inline instead of bubble
    }
  });

  // open the chat when the button is pressed
  document.getElementById('open-chat').addEventListener('click', () => {
    window.voiceflow.chat.open();
  });
</script>

Add one CSS rule so the embedded frame fills the screen:

/* make the embedded chat occupy the whole viewport */
.vfrc-chat--embed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  z-index: 9999;             /* stays on top */
}

/* make the embedded chat occupy the whole viewport */
.vfrc-chat--embed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  z-index: 9999;             /* stays on top */
}

--- 2. Keep the default popover and overwrite its overlay size If you’re already using renderMode: 'popover', just target the overlay container:

.vfrc-chat--overlay {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
}

.vfrc-chat--overlay {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
}

Then open it from your own launcher:

myLaunchButton.onclick = () => window.voiceflow.chat.open();

myLaunchButton.onclick = () => window.voiceflow.chat.open();

Both approaches rely on the same two ingredients provided by the Web-Chat API: • renderMode (widget / popover / embed) • window.voiceflow.chat.open() to programmatically show the interface Feel free to tweak margins, shadows, or z-index to match your brand.
Full API & styling docs → https://docs.voiceflow.com

graceful-blue•3mo ago

There is also an option called 'popover' and 'embed' on the 'interfaces' tab in Voiceflow

Radiant raindropOP•3mo ago

Yes I know but they are not full screen I think?

How can I make my popup interface full-screen?

Did you find this page helpful?