WordPress:使用 jQuery 通過使用 Elementor 單擊鏈接或按鈕打開 LiveChat 窗口

使用 jQuery 通過單擊使用 Elementor 的鏈接或按鈕打開 LiveChat 窗口

我們的一位客戶有 Elementor,WordPress 最強大的頁面構建平台之一。 在過去的幾個月裡,我們一直在幫助他們清理入站營銷工作,最大限度地減少他們實施的定制,並讓系統更好地溝通——包括分析。

客戶有 ID登錄,一個出色的聊天服務,在聊天過程的每一步都具有強大的 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 高級設置類

當然,代碼可以被增強或者也可以用於任何其他類型的事件,比如 谷歌分析事件. 當然,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

披露:我正在使用會員鏈接 ElementorID登錄 在本文中。 我們開發解決方案的網站是 印第安納州中部的熱水浴缸製造商.