Targetting the Tawk.To Widget

Boy, they don't make it easy!

So the usual way to target an element is to use an id or class. Failing that, wrap it in a container div and use that.

Tawk.To uses dynamic id's on every page load, they don't use classes and they make everything an inline style using !important. That's awesome, their widgets are super consistent, and they probably have very little support for layout issues. I've seen a feature request for this to be added, but it doesn't look like they will do anything based on their responses and considering how old the post is!

So, in short, I developed the below jQuery (yes I am sure could do it in pure Javascript, but I tend to use jQuery on all my sites, so I tend to code with that):

<script>
$(window).on('load', function(){
    if ($(window).width() < 768) {
        Tawk_API.onLoad = function () {
           $('iframe[title="chat widget"]').each(function(){
             this.style.setProperty('margin-bottom', '58px', 'important' )
             this.style.setProperty('max-height', 'calc(100% - 58px)', 'important' )
           });
        }
    }
});
</script>