How to make popup chat window(iframe) responsive which is already placed in bottom right corner of page?

Viewed 37

I have an iframe containing chatbot which is already placed in the right bottom corner of the screen. Below is the non-responsive code

.chatbot-div {
  z-index: 2147483647;
  position: fixed;
  top: 50px;
  right: 8px;
}

.b2bchatbot-iframe-open {
  display: block;
  overflow: hidden;
  width: 601px;
  height: 89vh;
  border-radius: 5px;
  border: medium none;
}

.b2bchatbot-iframe-close {
  display: none;
  overflow: hidden;
  width: 601px;
  height: 89vh;
  border-radius: 5px;
  border: medium none;
}
<div class="chattextwithicondiv" id="disableFloatIcon">
  <img class="image-tag" src={Icon} onclick={launchVirtualAssistant} />
</div>

<div class="chatbot-div" id="enableiFrame">
  <button class="close-popup-close" id="enableBtnForiFrame" onclick={closeVirtualAssistant}>×</button>


  <iframe id="enableB2BiFrame" class="b2bchatbot-iframe-close" src="https://chatbot.hellotars.com/conv/NJba4f/" frameborder=0 scrolling="no "></iframe>
                
            </div>

What to add in CSS to make the contents in iframe (popup chat window) responsive for different mobile devices?

Note: The existing code in CSS is not responsive

0 Answers
Related