WordPress: Sử dụng jQuery để mở cửa sổ LiveChat bằng cách nhấp vào liên kết hoặc nút bằng Elementor

Sử dụng jQuery để mở cửa sổ LiveChat bằng cách nhấp vào liên kết hoặc nút bằng Elementor

Một trong những khách hàng của chúng tôi có Elementor, một trong những nền tảng xây dựng trang mạnh mẽ nhất cho WordPress. Chúng tôi đã giúp họ hoàn thiện các nỗ lực tiếp thị trong nước trong vài tháng qua, giảm thiểu các tùy chỉnh mà họ đã triển khai và giúp hệ thống giao tiếp tốt hơn - bao gồm cả phân tích.

Khách hàng có LiveChat, một dịch vụ trò chuyện tuyệt vời có tích hợp Google Analytics mạnh mẽ cho mọi bước của quy trình trò chuyện. LiveChat có một API rất tốt để tích hợp nó vào trang web của bạn, bao gồm khả năng bật mở cửa sổ trò chuyện bằng cách sử dụng sự kiện onClick trong thẻ liên kết. Đây là cách nó trông:

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

Điều này rất hữu ích nếu bạn có khả năng chỉnh sửa mã lõi hoặc thêm HTML tùy chỉnh. Với Elementortuy nhiên, nền tảng bị khóa vì lý do bảo mật nên bạn không thể thêm sự kiện onClick cho bất kỳ đối tượng nào. Nếu bạn đã thêm sự kiện onClick tùy chỉnh đó vào mã của mình, bạn sẽ không gặp bất kỳ loại lỗi nào… nhưng bạn sẽ thấy mã bị xóa khỏi đầu ra.

Sử dụng jQuery Listener

Một hạn chế của phương pháp onClick là bạn sẽ phải chỉnh sửa mọi liên kết trên trang web của mình và thêm mã đó. Một phương pháp thay thế là bao gồm một tập lệnh trong trang lắng nghe cho một nhấp chuột cụ thể trên trang của bạn và nó thực thi mã cho bạn. Điều này có thể được thực hiện bằng cách tìm kiếm bất kỳ thẻ neo với một cụ thể Lớp CSS. Trong trường hợp này, chúng tôi đang chỉ định một thẻ liên kết với một lớp có tên openchat.

Trong phần chân trang của trang web, tôi chỉ cần thêm một trường HTML tùy chỉnh với tập lệnh cần thiết:

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

Bây giờ, tập lệnh đó rộng khắp trang web, vì vậy bất kể trang nào, nếu tôi có một lớp openchat được nhấp vào, nó sẽ mở cửa sổ trò chuyện. Đối với đối tượng Elementor, chúng tôi chỉ đặt liên kết thành # và lớp là openchat.

liên kết phần tử

phần tử hoặc các lớp cài đặt nâng cao

Tất nhiên, mã có thể được nâng cao hoặc cũng có thể được sử dụng cho bất kỳ loại sự kiện nào khác, như Sự kiện Google Analytics. Tất nhiên, LiveChat có tích hợp nổi bật với Google Analytics để thêm các sự kiện này, nhưng tôi đưa nó vào bên dưới chỉ để làm ví dụ:

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

Việc xây dựng một trang web với Elementor khá đơn giản và tôi thực sự khuyên bạn nên sử dụng nền tảng này. Có một cộng đồng tuyệt vời, rất nhiều tài nguyên và khá nhiều Phần bổ trợ Elementor giúp nâng cao khả năng.

Bắt đầu với Elementor Bắt đầu với LiveChat

Tiết lộ: Tôi đang sử dụng các liên kết liên kết cho ElementorLiveChat trong bài viết này. Trang web mà chúng tôi đã phát triển giải pháp là một Nhà sản xuất Hot Tub ở trung tâm Indiana.