3

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

4 Answers 4

9

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

1
  • This works, just needs a little fix. You are missing a closing bracket at the end.
    – Syed
    Commented Nov 27, 2022 at 10:00
6

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

3
  • This code is running those function in every 100miliseconds which is not recommended. Commented Dec 26, 2021 at 12:36
  • @BehnamAminazad Yes it is. It stops once the new css are applied. Commented Dec 26, 2021 at 16:04
  • It's ugly but it's intentional. I've analyzed their code and they covered every corner so that you can't really change anything in any elegant way. I'll use this solution too, but I wanted to avoid it.
    – brett
    Commented Mar 26 at 14:27
1

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..

0

Try this. 100% works! Copy & paste this code on your footer.php

The important part is yOffset value :

      mobile : {
        position : 'br',
        xOffset : 0,
        yOffset : '80px'
      },

<script type="text/javascript">
  var Tawk_API = Tawk_API || {};

  Tawk_API.customStyle = {
    visibility : {
      desktop : {
        position : 'br',
        xOffset : '60px',
        yOffset : 20
      },
      mobile : {
        position : 'br',
        xOffset : 0,
        yOffset : '80px'
      },
      bubble : {
        rotate : '0deg',
        xOffset : -20,
        yOffset : 0
      }
    }
  };
</script>

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Aug 9, 2023 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.