Botpress v2.2 - Full-Screen only under 1024px. by Keebs

by Zannax_Botpress

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<!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
      - Keebs for this template posted here https://discord.com/channels/1108396290624213082/1272227414197669960/1291497111736815755
  -->
  <head>
    <meta charset="UTF-8" />
    <title>Botpress Full-Screen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      /**
       * BOTPRESS CUSTOM STYLES
       */
      .bpWebchat {
        width: 100% !important;
        height: 100% !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        max-height: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      @media (min-width: 1024px) {
        .bpWebchat {
          width: 520px !important;
          height: 100% !important;
          position: fixed !important;
          left: 50% !important;
          top: 0 !important;
          transform: translateX(-50%) !important;
        }
      }
      </style>
  </head>

  <body>
    <script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
    <script src='https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js'></script>
    <script>
      // Open webchat
      /* The 'webchat:ready' event sometimes doesn't seem to trigger. ╭∩╮ (︶︿︶) ╭∩╮ */
      //window.botpress.on('webchat:ready', (conversationId) => { botpress.open(); });
      //window.addEventListener('load', () => setTimeout(() => {if (window.botpress.state !== 'opened')...

JavaScript

/**
* To try your theme comment lines below and at line 62 replace <code>https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js 
*/
window.botpress.init({
  "configuration": {
    "botAvatar":...