WordPress:使用 jQuery 通过使用 Elementor 单击链接或按钮打开 LiveChat 窗口

使用 jQuery 通过单击使用 Elementor 的链接或按钮打开 LiveChat 窗口

我们的一位客户有 Elementor,WordPress 最强大的页面构建平台之一。 在过去的几个月里,我们一直在帮助他们清理入站营销工作,最大限度地减少他们实施的定制,并让系统更好地沟通——包括分析。

客户有 在线聊天,一个出色的聊天服务,在聊天过程的每一步都具有强大的 Google Analytics 集成。 LiveChat 有一个非常好的 API,可以将其集成到您的网站中,包括能够使用锚标记中的 onClick 事件弹出打开聊天窗口。 看起来是这样的:

<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>

如果您能够编辑核心代码或添加自定义 HTML,这将非常方便。 和 Elementor,但是,出于安全原因,该平台已被锁定,因此您无法添加 点击事件 对任何物体。 如果您将自定义 onClick 事件添加到代码中,则不会出现任何类型的错误……但您会看到代码从输出中删除。

使用 jQuery 监听器

onClick 方法的一个限制是您必须编辑站点上的每个链接并添加该代码。 另一种方法是在页面中包含一个脚本 监听 对于您的页面上的特定点击,它会为您执行代码。 这可以通过寻找任何 锚标签 具有特定的 CSS类. 在这种情况下,我们指定一个带有名为的类的锚标记 公开聊天.

在站点的页脚中,我只需添加一个带有必要脚本的自定义 HTML 字段:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
  });
});
</script>

现在,该脚本是站点范围的,因此无论页面如何,如果我有一类 公开聊天 单击它,它将打开聊天窗口。 对于 Elementor 对象,我们只需将链接设置为 # 并将类设置为 公开聊天.

元素或链接

elementor 高级设置类

当然,代码可以被增强或者也可以用于任何其他类型的事件,比如 Google Analytics(分析)活动. 当然,LiveChat 与添加这些事件的 Google Analytics 有出色的集成,但我将其包括在下面只是作为示例:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
    gtag('event', 'Click', { 'event_category': 'Chat', 'event_action':'Open','event_label':'LiveChat' });
  });
});
</script>

使用 Elementor 构建网站非常简单,我强烈推荐该平台。 有一个很棒的社区,大量的资源,以及很多增强功能的 Elementor 附加组件。

开始使用 Elementor 开始使用 LiveChat

披露:我正在使用会员链接 Elementor在线聊天 在本文中。 我们开发解决方案的网站是 印第安纳州中部的热水浴缸制造商.