css remove an inline important from javascript loaded widget

Question

In my website, I am using tawk.to

I want to ovveride its css so that the widget is not displayed when the user prints the page. However the widget container comes with an inline style "display: block !important;" which I am unable to override.

The following code does not work. Any idea?

<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var $_Tawk_API={},$_Tawk_LoadStart=new Date();
    (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/my_id/default';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
    })();
    $(function(){
        $('#tawkchat-iframe-container').removeProp('display');
        console.log('removed'); //actually logged but the property is not removed.
    });
</script>

Set its height to 0 - or, if you don't need the space, set it's opacity to 0 - or, set it's width to 0 - lots of options... — StudioTime, Aug 03 '15 at 11:54
@DarrenSweeney Brilliant. If none of those are an option, you can also set display with !important, and beat out the other setter on specificity. — trex005, Aug 03 '15 at 11:56
What if you use `$('#tawkchat-iframe-container').attr('style', '');`...? — Ahs N, Aug 03 '15 at 12:13
@AhsN If you remove all styles it does not default to `display: none` AFAIK — StudioTime, Aug 03 '15 at 12:22
thanks ! the opacity was the solution. the widget is actually rendered with proprietary javascript and I could not override it with my own js. and opacity was the only attribute which had not been defined. — Sébastien, Aug 03 '15 at 12:36

score 0 · Answer 1 · answered Aug 03 '15 at 12:55

0

you can set width and height to 0px in print media CSS instead

//applies only for print media
#tawkchat-iframe-container { width:0, height:0 }

answered Aug 03 '15 at 12:55

venkat7668

2,657
1
22
26

score 0 · Answer 2 · answered Mar 13 '18 at 10:18

0

It is a hack but if nothing else works for you try this (you could isolate the css to only hide iframes in a certain container too):

@media print {

    iframe {
        display: none!important;
    }

}

answered Mar 13 '18 at 10:18

Starjumper Tech SL

417
5
10

1

This will hide all the iframe on that page. You can use the code from this https://stackoverflow.com/questions/68420905/style-the-tawk-to-chat-widget-with-my-custom-css/68420906#68420906 and customize as per your need. – Danish Shaikh Jul 17 '21 at 13:55

score 0 · Answer 3 · answered Jul 28 '20 at 11:34

The following hides the widget prior to print then returns the widget after printing. The page is captured for print well before the widget is re-shown even if the user holds the print dialog open. From here: feedback Tawk

window.onbeforeprint = function () {
    if (Tawk_API) {
        Tawk_API.hideWidget();
        setTimeout( function(){
        Tawk_API.showWidget();
        }, 1000 );
    }
};

Dexter · Answer 4 · 2021-06-10T00:00:33.477

This will ensure that the widget minimizes on load, note the setTimeout is important to achieve this. It's always good to stick with the tawk to API.

<script type="text/javascript">
  var Tawk_API = Tawk_API || {};
  var s1 = document.createElement("script"),
    s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = 'https://embed.tawk.to/5b161b708859f57bdc7bd84d/default';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin', '*');
    s0.parentNode.insertBefore(s1, s0);

//here's all you need
Tawk_API.onLoad = function() {
setTimeout(function() {
      Tawk_API.minimize();
    }, 1);
};
</script>

score 0 · Answer 5 · answered Jul 17 '21 at 13:56

0

I was also facing some css issue and I am able to figure out on how we can override their default css with our custom css. This might help you a little bit.

Style the Tawk.to chat widget with my custom css

answered Jul 17 '21 at 13:56

Danish Shaikh

474
3
14

css remove an inline important from javascript loaded widget

5 Answers5