使用我的自定义CSS设置Takk.to聊天小部件的样式

uinbv5nw  于 2022-10-24  发布在  WordPress
关注(0)|答案(3)|浏览(220)

我已经在我的WordPress网站上实现了一个Takak.to小工具。但正如你在下面的图片(手机版)中看到的,这个小工具与Call Us按钮重叠,这是我不想要的。默认情况下,Takk.to小部件不允许覆盖它们的css。让我知道你对这件事的想法。

yks3o0rb

yks3o0rb1#

有一种方法可以用您的自定义CSS覆盖它们的默认CSS。检查以下代码:

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

8nuwlpux

8nuwlpux2#

虽然这是相当晚的答复,但我在这里张贴它,因为有人可能会从中受益。在谷歌了很多次这个主题之后,我发现把tawk改成Placement非常简单。下面的样本将使它变得明显。我使用了以下代码,当然,我已经更改了下面代码中的sl.src值。只需将从tawk.to获得的代码片断放在标记之前,然后将定制样式代码放在该代码片断的标记之前,如下面的示例所示。

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

有关更多信息,请查看此处https://help.tawk.to/article/customizing-your-widget-placement-with-the-javascript-api

  • 抱歉,这是我在StackExchange上的第一个答案,所以我不知道如何隐藏“运行代码片段”按钮,因为它在这里不会做任何事情*
cqoc49vn

cqoc49vn3#

别担心,这只是一个小技巧,但可以做好工作

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

将此代码段添加到您的脚本中的标记之前
根据需要增加或减少setTimout(20)。
好好享受吧!德克斯..。

相关问题