WordPress: 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 đã thêm HTML tùy chỉnh này 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>
Sử dụng Trình nghe JavaScript
Ngoài ra, đây là mã sử dụng JavaScript:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var openchatElements = document.querySelectorAll('.openchat');
openchatElements.forEach(function(element) {
element.addEventListener('click', function() {
if (parent.LC_API && parent.LC_API.open_chat_window) {
parent.LC_API.open_chat_window();
}
return false;
});
});
});
</script>
Bây giờ, tập lệnh đó có trên toàn trang nên bất kể trang nào, nếu tôi có một lớp
trò chuyện mở đượ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à trò chuyện mở.Tất nhiên, mã có thể được nâng cao hoặc sử dụng cho bất kỳ loại sự kiện nào khác, chẳng hạn 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', 'open_chat_window', {
'event_category': 'Chat Interaction',
'event_label': 'Live Chat Opened'
});
});
});
</script>
Việc xây dựng một trang web bằng Elementor rất đơ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 Tiện ích bổ sung Elementor giúp nâng cao khả năng.