WordPress: Menggunakan jQuery Untuk Membuka Jendela LiveChat Dengan Mengklik Tautan atau Tombol Menggunakan Elementor

Menggunakan jQuery untuk membuka Jendela LiveChat Dengan Mengklik Tautan atau Tombol Menggunakan Elementor

Salah satu klien kami memiliki Elementor, salah satu platform pembuatan halaman paling tangguh untuk WordPress. Kami telah membantu mereka membersihkan upaya pemasaran masuk mereka selama beberapa bulan terakhir, meminimalkan penyesuaian yang mereka terapkan, dan membuat sistem berkomunikasi lebih baik – termasuk dengan analitik.

Pelanggan memiliki LiveChat, layanan obrolan fantastis yang memiliki integrasi Google Analytics yang kuat untuk setiap langkah proses obrolan. LiveChat memiliki API yang sangat bagus untuk mengintegrasikannya ke situs Anda, termasuk memiliki kemampuan untuk membuka jendela obrolan menggunakan acara onClick di tag jangkar. Berikut tampilannya:

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

Ini berguna jika Anda memiliki kemampuan untuk mengedit kode inti atau menambahkan HTML khusus. Dengan Elementor, meskipun demikian, platform dikunci untuk alasan keamanan sehingga Anda tidak dapat menambahkan acara onClick ke objek apa pun. Jika Anda memiliki acara onClick khusus yang ditambahkan ke kode Anda, Anda tidak mendapatkan jenis kesalahan apa pun… tetapi Anda akan melihat kode dihapus dari output.

Menggunakan Pendengar jQuery

Salah satu batasan metodologi onClick adalah Anda harus mengedit setiap tautan di situs Anda dan menambahkan kode itu. Metodologi alternatif adalah memasukkan skrip di halaman yang mendengarkan untuk klik tertentu pada halaman Anda dan itu mengeksekusi kode untuk Anda. Ini dapat dilakukan dengan mencari tag jangkar dengan spesifik kelas CSS. Dalam hal ini, kami menunjuk tag jangkar dengan kelas bernama obrolan terbuka.

Di bagian bawah situs, saya hanya menambahkan bidang HTML khusus dengan skrip yang diperlukan:

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

Sekarang, skrip itu adalah situs yang luas jadi terlepas dari halamannya, jika saya memiliki kelas obrolan terbuka yang diklik, itu akan membuka jendela obrolan. Untuk objek Elementor, kami hanya mengatur tautan ke # dan kelasnya sebagai obrolan terbuka.

tautan elemen

kelas pengaturan lanjutan elemen

Tentu saja, kode dapat ditingkatkan atau dapat digunakan untuk jenis acara lainnya juga, seperti a Acara Google Analytics. Tentu saja, LiveChat memiliki integrasi luar biasa dengan Google Analytics yang menambahkan peristiwa ini, tetapi saya menyertakannya di bawah ini hanya sebagai contoh:

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

Membangun situs dengan Elementor cukup sederhana dan saya sangat merekomendasikan platform ini. Ada komunitas yang hebat, banyak sumber daya, dan beberapa Elementor Add-Ons yang meningkatkan kemampuan.

Memulai Dengan Elementor Mulai Dengan LiveChat

Pengungkapan: Saya menggunakan tautan afiliasi untuk Elementor serta LiveChat dalam artikel ini. Situs tempat kami mengembangkan solusi adalah a Pabrikan Hot Tub di Indiana tengah.