preventing the chat widget from printing

[gotmike]

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?

[dennisedson]

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

[gotmike · Accepted solution]

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]

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 😀