iFrame size to change dynamically with content

Question

What I am trying to do with that javascript is iFrame a chat widget which I am hosting on a webpage - it is initially a launcher, a small round clickable icon, Which then launches to a full sized window. As it is, my iFrame code simply captures the entire page and shows that At a certain height and width on this external site. The problem I have is the iFrame is the entire page, so especially when it is just The small clickable launcher, the iFrame is taking up a massive chunk of this external site which obviously isn't practical as its Unsightly and you can't click on content beneath it! And then even with the chat widget expanded its still not okay,

What I want to do is somehow iFrame just the chat-launcher at first, and then the window when the widget is expanded..

How did I think to do it - maybe have the iFrame expand depending on the content - I have no clue on this. I also thought - Could I make the chat launcher the entire size of the page, just iframe that, then when its clicked, id obviously still Need the iframe on the clients page to expand with the content, or perhaps that is the solution for an expanding iFrame?

My javascript code I am using:

prepareFrame();

function prepareFrame() {
    console.log("yes this consoles inside of prepareFrame")
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "https://fb23e954.ngrok.io");
    ifrm.style.width = "640px";
    ifrm.style.height = "480px";
    ifrm.style.position="fixed";
    ifrm.style.right="0";
    ifrm.style.bottom="0";

    document.body.appendChild(ifrm);
}

It would be amazing if anybody could help at all, thanks if you can!

Answer 1

Why don't you just use Viewport Width and Viewport Height instead of px?

function prepareFrame() {
    console.log("yes this consoles inside of prepareFrame")
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "https://fb23e954.ngrok.io");
    ifrm.style.width = "80vw";
    ifrm.style.height = "60vh";
    ifrm.style.position="fixed";
    ifrm.style.right="0";
    ifrm.style.bottom="0";

    document.body.appendChild(ifrm);
}