WordPress: Używanie jQuery do otwierania okna LiveChat poprzez kliknięcie linku lub przycisku za pomocą Elementora

Używanie jQuery do otwierania okna LiveChat poprzez kliknięcie linku lub przycisku za pomocą Elementora

Jeden z naszych klientów ma Elementor, jedna z najsolidniejszych platform do tworzenia stron dla WordPressa. W ciągu ostatnich kilku miesięcy pomagaliśmy im w uporządkowaniu działań związanych z marketingiem przychodzącym, minimalizując wdrożone przez nich dostosowania i poprawiając komunikację systemów – w tym za pomocą analiz.

Klient ma LiveChat, fantastyczna usługa czatu, która ma solidną integrację z Google Analytics na każdym etapie procesu czatu. LiveChat ma bardzo dobry interfejs API do integracji z Twoją witryną, w tym możliwość otwierania okna czatu za pomocą zdarzenia onClick w tagu kotwicy. Oto jak to wygląda:

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

Jest to przydatne, jeśli masz możliwość edytowania podstawowego kodu lub dodawania niestandardowego kodu HTML. Z Elementor, jednak platforma jest zablokowana ze względów bezpieczeństwa, więc nie można dodać ani Wydarzenie onClick do dowolnego obiektu. Jeśli masz to niestandardowe zdarzenie onClick dodane do kodu, nie otrzymasz żadnego błędu… ale zobaczysz kod usunięty z danych wyjściowych.

Korzystanie z odbiornika jQuery

Jednym z ograniczeń metodologii onClick jest to, że musiałbyś edytować każdy link w swojej witrynie i dodać ten kod. Alternatywną metodologią jest umieszczenie na stronie skryptu, który: słucha za określone kliknięcie na Twojej stronie i wykonuje kod za Ciebie. Można to zrobić, szukając dowolnego tag kotwicy z konkretnym klasa CSS. W tym przypadku oznaczamy znacznik kotwicy za pomocą klasy o nazwie Otwórz czat.

W stopce strony dodaję po prostu niestandardowe pole HTML z niezbędnym skryptem:

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

Teraz ten skrypt obejmuje całą witrynę, więc niezależnie od strony, jeśli mam klasę Otwórz czat po kliknięciu otworzy się okno czatu. W przypadku obiektu Elementor po prostu ustawiamy link na #, a klasę jako Otwórz czat.

elementor link

zajęcia z ustawień zaawansowanych elementor

Oczywiście kod można ulepszyć lub można go wykorzystać do dowolnego innego rodzaju wydarzenia, takiego jak Zdarzenie Google Analytics. Oczywiście LiveChat ma znakomitą integrację z Google Analytics, która dodaje te zdarzenia, ale zamieszczam to poniżej jako przykład:

<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>

Tworzenie witryny za pomocą Elementora jest dość proste i bardzo polecam tę platformę. Istnieje świetna społeczność, mnóstwo zasobów i sporo dodatków do Elementora, które zwiększają możliwości.

Zacznij korzystać z Elementora Zacznij korzystać z LiveChat

Ujawnienie: używam linków partnerskich dla Elementor i LiveChat w tym artykule. Strona, na której opracowaliśmy rozwiązanie, to Producent wanien z hydromasażem w centrum stanu Indiana.