WordPress: jQuery를 사용하여 Elementor를 사용하여 링크 또는 버튼을 클릭하여 LiveChat 창 열기

Elementor를 사용하여 링크 또는 버튼을 클릭하여 jQuery를 사용하여 LiveChat 창 열기

고객 중 한 명이 엘리멘터, WordPress용으로 가장 강력한 페이지 구축 플랫폼 중 하나입니다. 우리는 그들이 지난 몇 달 동안 인바운드 마케팅 노력을 정리하고 구현한 사용자 정의를 최소화하고 분석을 포함하여 시스템이 더 잘 통신하도록 도왔습니다.

고객은 LIVECHAT, 채팅 프로세스의 모든 단계에 대해 강력한 Google Analytics 통합을 제공하는 환상적인 채팅 서비스입니다. LiveChat에는 앵커 태그에서 onClick 이벤트를 사용하여 채팅 창을 여는 기능을 포함하여 사이트에 통합하기 위한 매우 우수한 API가 있습니다. 다음과 같이 표시됩니다.

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

핵심 코드를 편집하거나 사용자 정의 HTML을 추가할 수 있는 경우에 유용합니다. 와 함께 엘리멘터, 그러나 플랫폼은 보안상의 이유로 잠겨 있으므로 추가할 수 없습니다. onClick 이벤트 어떤 개체에. 사용자 정의 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 이 기사에서. 솔루션을 개발한 사이트는 인디애나 중부의 온수 욕조 제조업체.