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.
4 Answers
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
-
This works, just needs a little fix. You are missing a closing bracket at the end.– SyedCommented Nov 27, 2022 at 10:00
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);
}
};
-
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.– brettCommented Mar 26 at 14:27
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..
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>
-
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 BotCommented Aug 9, 2023 at 15:24