Make chat fullscreen for desktop or tablet

[DSorochynskyi]

Hey community.
How can i use css and js to make chat full screen for desktop or tablet? Fixed width and height inside iframe bother me.

[himanshurauthan]

@DSorochynskyi yes for css

iframe {
 width: 100%;
 height: 100%;
 border: none;
}

@media (min-width: 768px) {
 iframe {
 width: 100vw;
 height: 100vh;
 }
}

For Javascript

function makeChatFullscreen() {
 var iframe = document.getElementById("chat-iframe");
 iframe.style.width = "100vw";
 iframe.style.height = "100vh";
}

window.addEventListener("resize", makeChatFullscreen);

This code will make the chat iframe fullscreen on both desktop and tablet devices in HubSpot. The iframe element will have a width and height of 100%, which will make it fill the entire viewport. The @media query will ensure that the iframe is 100vw and 100vh on devices with a width of at least 768px.

The makeChatFullscreen() function will be called when the window is resized. This will ensure that the chat iframe is always fullscreen, regardless of the device’s screen size. To use this code, you will need to add it to your HubSpot chat page. You will also need to update the id of the iframe element to the ID of your chat iframe.

[DSorochynskyi]

Hello @himanshurauthan
Thank you for your answer.
I already tried something similar but it doesn’t work for me.

Now I tried your solution and also without result