APIs & Integrations

gotmike
Contributeur de premier rang

preventing the chat widget from printing

Résolue

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 Votes
1 Solution acceptée
gotmike
Solution
Contributeur de premier rang

preventing the chat widget from printing

Résolue

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");
        }
    });

 

Voir la solution dans l'envoi d'origine

3 Réponses
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

preventing the chat widget from printing

Résolue

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

 

0 Votes
gotmike
Solution
Contributeur de premier rang

preventing the chat widget from printing

Résolue

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
Équipe de développement de HubSpot
Équipe de développement de HubSpot

preventing the chat widget from printing

Résolue

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 😀

0 Votes