Botpress v2.2 - Full-Width in a DIV

by Zannax_Botpress

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<!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
    A special greeting to samanadelbosque, for his post: https://discord.com/channels/1108396290624213082/1265381142924759161/1267516791807148043
  -->
  <head>
    <meta charset="UTF-8">
    <title>Botpress Full-Width in a DIV</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;
      }*/
      
      h2, h3 {text-align: center}

      .container-bpFull {
        display: flex;
        flex-direction: column; // 000Bo
        justify-content: center;
        align-items: center;
      }
        
      .center-div {
        width: 80vw;
        height: 80vh;
        background-color: rgb(102, 71, 255);
        border-radius: 15px;
        padding: 5px;
        box-sizing: border-box;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      @media only screen and (min-width: 1024px) {
        .center-div {
          width: 50vw;
        }
      }

 /*     @media only screen and (max-width: 1024px) {
        .center-div {
          width: 80vw;
        }
      }*/

      #bpFull { 
        width: 100%;
        height: 100%;
        border: none;
       ...

JavaScript

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