title: How to create a chatbox that floats in the bottom right corner and is responsive?
body: <p>I am trying to create a chat box that floats in the bottom right corner of a website like this.
  <a href="https://i.stack.imgur.com/veRd5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/veRd5.png" alt="enter image description here"></a></p>
  
  <p>But my chatbox goes to the bottom end of the page which is not viewable.<br>
  This is my scss</p>
  
  <pre><code>.g_chat { 
    width: 300px;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid black;
  
    &amp;.collapsed { // window collapse
      height: auto;
      .g_chat_inner {
        display: none;
      }
    }
  
    .g_chat_toggler { //  button to hide/show chat box
      cursor: pointer;
    }
  
    form { // form to submit message
      margin-top: 30px;
    }
  
    #messages { // all messages here
      max-height: 500px;
      overflow-y: auto;
      .message {
        margin-bottom: 10px;
        &amp;:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
  </code></pre>
  
  <p>When I inspect my page, I see that the <code>&lt;body&gt;</code> tag is getting changed to </p>
  
  <pre><code>&lt;body style="position: relative; min-height: 100%; top: 0px;"&gt;
  </code></pre>
  
  <p>I don't know which plugin changes the body tag. Could that be the problem or am I missing something?</p>
  
  <p>Kindly help. Thanks.</p>