WordPress:jQueryを使用して、Elementorを使用してリンクまたはボタンをクリックしてLiveChatウィンドウを開く

jQueryを使用して、Elementorを使用してリンクまたはボタンをクリックしてLiveChatウィンドウを開く

私たちのクライアントのXNUMXつは Elementor、WordPress用の最も堅牢なページ構築プラットフォームのXNUMXつ。 私たちは、過去数か月にわたってインバウンドマーケティングの取り組みをクリーンアップし、実装したカスタマイズを最小限に抑え、分析を含めてシステムのコミュニケーションを改善するのを支援してきました。

顧客は ライブチャット、チャットプロセスのすべてのステップで強力なGoogleAnalytics統合を備えた素晴らしいチャットサービス。 LiveChatには、アンカータグのonClickイベントを使用してチャットウィンドウをポップオープンする機能など、サイトに統合するための非常に優れたAPIがあります。 これがどのように見えるかです:

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

これは、コアコードを編集したり、カスタムHTMLを追加したりする機能がある場合に便利です。 と Elementorただし、セキュリティ上の理由からプラットフォームがロックされているため、追加することはできません。 onClickイベント 任意のオブジェクトに。 そのカスタムonClickイベントをコードに追加している場合、どのような種類のエラーも発生しません…しかし、出力からコードが削除されているのがわかります。

jQueryリスナーの使用

onClick方法論のXNUMXつの制限は、サイト上のすべてのリンクを編集してそのコードを追加する必要があることです。 別の方法は、ページに次のようなスクリプトを含めることです。 聞く ページを特定クリックすると、コードが実行されます。 これは、何かを探すことによって行うことができます アンカータグ 特定の CSSクラス。 この場合、次の名前のクラスでアンカータグを指定しています openchat.

サイトのフッター内に、必要なスクリプトを含むカスタムHTMLフィールドを追加するだけです。

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

さて、そのスクリプトはサイト全体なので、ページに関係なく、 openchat クリックすると、チャットウィンドウが開きます。 Elementorオブジェクトの場合、リンクを#に設定し、クラスを次のように設定します。 openchat.

elementorリンク

elementor詳細設定クラス

もちろん、コードを拡張したり、他の種類のイベントにも使用したりできます。 GoogleAnalyticsイベント。 もちろん、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 及び ライブチャット 記事上で。 ソリューションを開発したサイトは インディアナ州中部の温水浴槽メーカー.