Style the Tawk.to chat widget with my custom css - css

Question

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.

Answer 1

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);
}
};

Answer 2

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

Answer 3

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