Botpress Full-Screen v2.1

by Zannax_Botpress

HTML

<!doctype html>
<html>
  <!-- 
    Thank you to the Botpress community (https://discord.com/channels/1108396290624213082) for their suggestions regarding this example.
    A special greeting to François, aka 000Bo, for his post: https://discord.com/channels/1108396290624213082/1272227414197669960
  -->
  <head>
    <meta charset="UTF-8" />
    <title>Botpress Full-Screen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      body {
        display: flex;
        flex-direction: column; // 000Bo
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        color: white;
        background-color: #000000;
        font-family: Arial, sans-serif;
      }

      /**
       * BOTPRESS CUSTOM STYLES
       */
      @media (min-width:768px) {
        .bpOpen { width: 100%; height: 100%; right: 0; bottom: 0; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
      }
    </style>
  </head>

  <body>
    <header>
      <h2>Botpress Full-Screen</h2>
    </header>
    <script src="https://cdn.botpress.cloud/webchat/v2.1/inject.js"></script>
    <script src="https://mediafiles.botpress.cloud/26a83f89-ace1-4045-92ba-95b836f75669/webchat/v2.1/config.js"></script>
    <script>
      // Open webchat
      window.botpress.on("webchat:ready", (conversationId) => {
        botpress.open()
      })
    </script>
  </body>
</html>