APIs & Integrations

gotmike
Top Contributor

preventing the chat widget from printing

SOLVE

I'm not sure if this is the best place to post this, but we have the chat widget showing on our custom app. When the user prints using the browser, it shows the chat widget on the printed page (and the print preview).

 

We have tried hiding it by adding the 'd-print-none' class (we're using bootstrap) and also tried adding the 'display:none' to the style of the hubspot chat widget div.

 

Originally it looks like this...

<div id="hubspot-messages-iframe-container" class="widget-align-left" style="width: 276px; height: 246px;">
<div class="shadow-container"></div>
<iframe src="https://app.hubspot.com/conversations-visitor/[removed]" title="chat widget">
</iframe>
</div>

 

Any suggestions on how to hide it on print?

0 Upvotes
1 Accepted solution
gotmike
Solution
Top Contributor

preventing the chat widget from printing

SOLVE

thanks!

 

my install is not on wordpress, so maybe that's the issue, but media queries didn't actually work for me.

 

something in the html inside the iframe was overriding any css i applied on my site.

 

it did get rid of "some" of the chat widget but parts were still showing through.

 

turns out what i was able to do was to use the `beforeprint` and `afterprint` events and some javascript to set the `display` property in the style of the `iframe` itself. also, it was key that we added the `!important` modifier, otherwise it doesn't work.

 

like this...

    // HIDE CHAT BOX ON PRINT
    window.addEventListener("beforeprint", function (event) {
        const liveFrame = document.querySelector("#hubspot-messages-iframe-container > iframe");
        if (liveFrame != null) {
            liveFrame.style.setProperty("display", "none", "important");
        }
    });

    window.addEventListener("afterprint", function (event) {
        const liveFrame = document.querySelector("#hubspot-messages-iframe-container > iframe");
        if (liveFrame != null) {
            liveFrame.style.removeProperty("display");
        }
    });

 

View solution in original post

3 Replies 3
dennisedson
HubSpot Product Team
HubSpot Product Team

preventing the chat widget from printing

SOLVE

hey @gotmike !

@media print {
  #hubspot-messages-iframe-container {
    visibility: hidden;
  }
}

 

Hope that helps

I tested on a Wordpress local install and I was able to successfully use this in my css

 

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes
gotmike
Solution
Top Contributor

preventing the chat widget from printing

SOLVE

thanks!

 

my install is not on wordpress, so maybe that's the issue, but media queries didn't actually work for me.

 

something in the html inside the iframe was overriding any css i applied on my site.

 

it did get rid of "some" of the chat widget but parts were still showing through.

 

turns out what i was able to do was to use the `beforeprint` and `afterprint` events and some javascript to set the `display` property in the style of the `iframe` itself. also, it was key that we added the `!important` modifier, otherwise it doesn't work.

 

like this...

    // HIDE CHAT BOX ON PRINT
    window.addEventListener("beforeprint", function (event) {
        const liveFrame = document.querySelector("#hubspot-messages-iframe-container > iframe");
        if (liveFrame != null) {
            liveFrame.style.setProperty("display", "none", "important");
        }
    });

    window.addEventListener("afterprint", function (event) {
        const liveFrame = document.querySelector("#hubspot-messages-iframe-container > iframe");
        if (liveFrame != null) {
            liveFrame.style.removeProperty("display");
        }
    });

 

dennisedson
HubSpot Product Team
HubSpot Product Team

preventing the chat widget from printing

SOLVE

Cool.  Glad you got it working!

I knew you weren't using wordpress, but it was the quickest thing I could spin up to test 😀

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes