Wordpress教程 2023年05月3日
0 收藏 0 点赞 842 浏览 2009 个字

默认情况下,Elementor 禁止在按钮链接中添加 JavaScript 代码。这是出于安全和稳定性方面的考虑。如果您试图添加 javascript:void(Tawk_API.toggle()) 脚本到按钮链接中,可能会受到限制。

如果您希望在按钮链接中使用 JavaScript 代码,有一些替代方案可供选择,例如:

在按钮上使用 JavaScript 事件监听器:您可以使用 JavaScript 事件监听器来处理按钮的点击事件,而不是将 JavaScript 代码直接嵌入到按钮链接的 URL 地址中。例如,您可以添加以下代码到您的页面中的脚本区块中:

<script>
jQuery(document).ready(function($){
   $('.kefu').click(function(){
      Tawk_API.toggle();
   });
});
</script>

请注意,您需要将上面的 .kefu 替换为您实际使用的按钮的 class。

  1. 使用其他插件或工具:如果您不想使用 JavaScript 事件监听器,您可以考虑使用其他插件或工具来添加 JavaScript 代码到您的网站中。例如,您可以使用 Code Snippets 插件来添加 JavaScript 代码到您的网站中。

请注意,破解 Elementor 的限制可能会导致您的网站不稳定或不安全。因此,请谨慎使用此类技术,并始终遵循最佳安全实践。

下面是官方文档:

作为使用标准嵌入或内联聊天框的替代方法,您可以从网站上的任何文本或按钮调用聊天窗口。

注意: 以下说明只能通过浏览器或 tawk.to 桌面应用完成。它们无法在 tawk.to 移动应用程序中完成。

您可以通过四个步骤执行此操作:

1. 在结束 </body> 标记之前将小部件代码添加到您的网站。

2. 使用点击事件将自定义文本或图像添加到服务器。

3. 修改小部件行为,使其“加载时隐藏小部件”(可选)。

4. 根据您的状态显示自定义图像或文本(可选)。
步骤1 - 复制小部件代码

注意: 如果您已经在您的网站上安装了 tawk.to 插件和小部件,则可以跳过此步骤并从步骤 2 开始。

登录到仪表板并前往⚙️管理 ➞ 频道 ➞ 聊天小部件

wordpress+Elementor接入tawk.to客服插件自定义链接启动聊天对话窗口

接下来,将鼠标悬停在“小组件代码”部分上,然后选择“复制到剪贴板”以复制代码。

wordpress+Elementor接入tawk.to客服插件自定义链接启动聊天对话窗口

将小部件代码粘贴到您的网站 HTML 中,紧挨着 </body> 标签之前。

然后,刷新您的网站以确保您看到小部件。


第 2 步 - 在您的网站上

创建按钮或文本

创建一个按钮或文本,并在它之前添加以下代码:对于文本链接,请使用:

对于图像使用:


步骤3 - 在加载时隐藏小部件并弹出

登录到仪表板并前往⚙️管理 ➞ 频道 ➞ 聊天小部件

.

wordpress+Elementor接入tawk.to客服插件自定义链接启动聊天对话窗口

向下滚动到小部件行为 - 可见性设置。

wordpress+Elementor接入tawk.to客服插件自定义链接启动聊天对话窗口

然后,打开 加载时隐藏小部件 以在单击小部件之前将其隐藏。

wordpress+Elementor接入tawk.to客服插件自定义链接启动聊天对话窗口

步骤 4 - 根据您的状态

显示自定义图像或文本

如果您按照步骤 1 到 3 操作,您现在应该会在您的网站上看到一个图像或文本,单击时会弹出聊天。

高级选项是根据小部件的状态显示不同的图像。例如,当小组件脱机时显示一个图像,在小组件联机时显示另一个图像。

1. 将下面的 div 代码添加到您网站的 HTML 中您希望显示按钮或文本的位置。您无需在 div 中添加任何内容 — 只需完全按原样复制和粘贴即可。

2. 使用自定义图像和文本添加和修改下面的代码,并将其放在 </body> 标签之前。

<!--Start of tawk.to Status Code-->

<script type="text/javascript">

Tawk_API = Tawk_API || {};

Tawk_API.onStatusChange = function (status){

if(status === 'online')

{

document.getElementById('status').innerHTML = '<a href="javascript:void(Tawk_API.toggle())" rel="external nofollow" >Online - Click to chat</a>';

}

else if(status === 'away')

{

document.getElementById('status').innerHTML = 'We are currently away';

}

else if(status === 'offline')

{

document.getElementById('status').innerHTML = 'Live chat is Offline';

}

};

</script>

<!--End of tawk.to Status Code -->

 

需要帮助吗?联系我们的支持团队或安排通话

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.mizhanw.com/blog/2251.html

相关推荐
woocommerce在账单地址和配送地址中添加自定义字段
// 添加自定义字段到结账页面并显示在邮编下面 add_filter('woocommerce_checkout_fields', 'cus…
日期:2024-07-19 点赞:0 阅读:15
WooCommerce 产品页面上自动选择所有属性的第一个选项实例
要在 WooCommerce 产品页面上自动选择所有属性的第一个选项,可以使用以下 JavaScript 代码,该代码将遍历所有属性选择框并…
日期:2024-07-04 点赞:0 阅读:47
//Woocommerce 用自定义按钮/链接替换添加到购物车按钮(作用于列表页) add_filter( 'woocommerce_loo…
日期:2024-05-12 点赞:0 阅读:391
如何从woocommerce 类目链接中去掉 Product-Category
比如要把这个类目链接: https://www.fobwebs.com/product-category/apple/ 改成: https:…
日期:2024-05-07 点赞:0 阅读:409
woocommerce 订单相关钩子
woocommerce_checkout_update_order_meta: 在订单元数据更新时触发。您可以在此钩子中更新订单的元数据,例…
日期:2024-03-15 点赞:0 阅读:558
WordPress 的最佳 Cloudflare 设置(边缘涡轮增压)
无论您的 WordPress 主机有多快都无关紧要;您永远无法克服网络延迟。像 Cloudflare 这样的内容分发网络 (CDN) 通过将…
日期:2024-02-24 点赞:0 阅读:536
发表评论
暂无评论

还没有评论呢,快来抢沙发~