Style the Tawk.to chat widget with my custom css

user_7777802 0
Viewed 4651

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

tawk.to wordpress widget css
2 Answers

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

user_77778020

Although it is quite late answer but I'm posting it here because some one may get benefited with it. After a lot of googling about the topic I found that it is quite simple to change tawk.to placement. Below sample will make it evident. I used following code and of course I've changed the sl.src value in the code below. Just place the snippet obtained from tawk.to before tag and then place the custom styling code just before the tag of that snippet as can be seen in the example below.

<!--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/620929a89k40e$6ywsv/ry953*(*fqsdgl';
  s1.charset = 'UTF-8';
  s1.setAttribute('crossorigin', '*');
  s0.parentNode.insertBefore(s1, s0);
})();

// Custom styling of Offset starts here
Tawk_API.customStyle = {
  visibility: {
  //for desktop only
    desktop: {
      position: 'br', // bottom-right
      xOffset: 15, // 15px away from right
      yOffset: 40 // 40px up from bottom
    },
    // for mobile only
    mobile: {
      position: 'bl', // bottom-left
      xOffset: 5, // 5px away from left
      yOffset: 50 // 50px up from bottom
    },
    // change settings of bubble if necessary
    bubble: {
      rotate: '0deg',
      xOffset: -20,
      yOffset: 0
    }
  }
</script>
<!--End of Tawk.to Script-->

for more information you can check here https://help.tawk.to/article/customizing-your-widget-placement-with-the-javascript-api

Sorry its my first answer on stackexchange so I don't know how to hide 'Run Code Snippet' button as it'll do nothing here

user_178649830
Related