csswordpresswidgettawk.to

Style the Tawk.to chat widget with my custom css


I have implemented a Tawk.to widget on my wordpress website. But as you can see in the image below(mobile version) the widget is overlapping the call us button which I don't want. By default the Tawk.to widget doesn't allow to override their css. Let me know your thoughts on this one.

enter image description here


Solution

  • There is a way that you can override their default css with your custom css. Check the below code:

    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
    var Tawk_API=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/60f038e2d6e7610a49ab6e35/1fal5sduv';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->
    
    var def_tawk_bottom = "20px"; /*This is their default style that I want to change*/
    var def_tawk_right = "16px"; /*This is their default style that I want to change*/
    var customize_tawk = ""; /*Interval object*/
    
    function customize_tawk_widget(){
        var cur_bottom = jQuery("iframe[title='chat widget']").eq(0).css('bottom'); /*Get the default style*/
        var cur_right = jQuery("iframe[title='chat widget']").eq(0).css('right'); /*Get the default style*/
        if(cur_bottom == def_tawk_bottom && cur_right == def_tawk_right){
            /*Check if the default style exists then remove it and add my custom style*/
            jQuery("iframe[title='chat widget']").eq(0).css({ 'right': '', 'bottom': '' });
            jQuery("iframe[title='chat widget']").eq(0).addClass("custom-chat-widget");
            clearInterval(customize_tawk);
        }
    }
    
    /*Customize the widget as soon as the widget is loaded*/
    Tawk_API = Tawk_API || {};
    Tawk_API.onLoad = function(){
        /*Only for mobile version*/
        if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
            var customize_tawk = setInterval(customize_tawk_widget, 100);
        }
    };
    
    /*Customize the widget as soon as the widget is minimized*/
    Tawk_API = Tawk_API || {};
    Tawk_API.onChatMinimized = function(){
        /*Only for mobile version*/
        if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
            var customize_tawk = setInterval(customize_tawk_widget, 100);
        }
    };
    

    enter image description here