preventing the chat widget from printing

SOLVE
gotmike
Top Contributor

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

Accepted Solutions
gotmike
Solution
Top Contributor

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
Community Manager

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




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
gotmike
Solution
Top Contributor

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

dennisedson
Community Manager

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




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes