使用我的自定义 css 设置 Tawk.to 聊天小部件的样式 [英] Style the Tawk.to chat widget with my custom css

问题描述

我在我的 wordpress 网站上实现了一个 Tawk.to 小部件.但是正如您在下图(移动版本)中所看到的，小部件与我不想要的呼叫我们按钮重叠.默认情况下，Tawk.to 小部件不允许覆盖其 css.让我知道您对此的看法.

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.

推荐答案

有一种方法可以使用自定义 css 覆盖默认 css.检查以下代码:

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

这篇关于使用我的自定义 css 设置 Tawk.to 聊天小部件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！