Question 165562 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I style the Tawk.to chat widget with my custom css in WordPress?

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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

    Login or Signup to reply.
  3. 0

    Worry no more, it’s just a little hack but does the job

    setTimeout(function() { $("#mytawkdiv iframe").contents().find("head").append($('<style type="text/css">YOUR STYLES eg. input { display: none; }</style>'); }), 20);

    Add this snippet to your javascript before the tag

    Increase or decrease the setTimout (20) as needed.

    Enjoy! Dex..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search