自定义按钮（链接）打开Tidio在线聊天窗口教程【最新】

Tidio - 实时在线聊天工具（AI 聊天机器人） — Tidio – 实时在线聊天工具（AI 聊天机器人）

WPPOP推荐外贸独立站用户使用的 AI 在线聊天客服插件 – Tidio 是一个多合一的客户体验解决方案，具有实时聊天、聊天机器人、Lyro AI 聊天机器人和多渠道通信，用于销售和支持的预构建聊天机器人可自动提高销售额并及时解决客户的常见问题。

当您不希望访问者直接看到 Tidio 聊天小部件图标，并且只想用户通过单击自定义按钮或链接来打开 Tidio 聊天窗口的话，请详细阅读本文教程。

添加自定义按钮

要创建自定义按钮，可以参考以下自定义按钮代码，并将其添加到您希望在网站上显示的位置：

<button class="button-custom-tidio">Live Chat</button>

或者

<a class="button-custom-tidio">Live Chat</a>

然后，再添加一下js脚本代码到网站文件中：

(function() {
function onTidioChatApiReady() {
window.tidioChatApi.hide();
}

if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
}

document.querySelector(".button-custom-tidio").addEventListener("click", function() {
window.tidioChatApi.show();
window.tidioChatApi.open();
});
})();

如果使用的是WPPOP的外贸独立站模板，可以直接在网站后台的 网站设置 – 扩展设置 – js代码 中添加。

添加自定义链接

要通过单击自定义链接打开 Tidio 聊天窗口，请使用以下自定义链接代码：

<a href="javascript:;" onclick="tidioChatApi.display(true);tidioChatApi.open()">Live Chat</a>

隐藏聊天小部件

方法1：在后台的【插件 – 安装插件】页面，在线搜索 Tidio 在线安装，启用即可使用；

要实现默认隐藏 Tidio 聊天窗口，当用户点击按钮或链接时，才打开Tidio 聊天窗口的话，请在标记之前添加以下函数：

(function() {
   function onTidioChatApiReady() {
   window.tidioChatApi.hide();
   window.tidioChatApi.on("close", function() {
   window.tidioChatApi.hide();
   });
   }
  
   if (window.tidioChatApi) {
   window.tidioChatApi.on("ready", onTidioChatApiReady);
   } else {
   document.addEventListener("tidioChat-ready", onTidioChatApiReady);
   }
  
   document.querySelector(".button-custom-tidio").addEventListener("click", function() {
   window.tidioChatApi.show();
   window.tidioChatApi.open();
   });
  })();

如果使用的是WPPOP的外贸独立站模板，可以直接在网站后台的 网站设置 – 扩展设置 – js代码 中添加。

友情提示：上面代码中的 class 类名称 button-custom-tidio 可以自定义修改名称，确保3处名称一致即可。

通过执行这些步骤并添加以上提供的代码到网站中，您只需单击按钮或链接即可轻松启动您的 Tidio 聊天窗口了，以此增强访客的聊天体验。