WordPress: Menggunakan jQuery Untuk Membuka Tetingkap LiveChat Dengan Mengklik Pautan atau Butang Menggunakan Elementor

Menggunakan jQuery untuk membuka Tetingkap LiveChat Dengan Mengklik Pautan atau Butang Menggunakan Elementor

Salah seorang pelanggan kami telah Elementor, salah satu platform pembinaan halaman yang paling teguh untuk WordPress. Kami telah membantu mereka membersihkan usaha pemasaran masuk mereka sejak beberapa bulan lalu, meminimumkan penyesuaian yang mereka laksanakan dan menjadikan sistem berkomunikasi dengan lebih baik – termasuk dengan analitik.

Pelanggan telah LiveChat, perkhidmatan sembang hebat yang mempunyai integrasi Google Analitis yang mantap untuk setiap langkah proses sembang. LiveChat mempunyai API yang sangat baik untuk menyepadukannya ke dalam tapak anda, termasuk mempunyai keupayaan untuk membuka tetingkap sembang menggunakan acara onClick dalam teg sauh. Begini rupanya:

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

Ini berguna jika anda mempunyai keupayaan untuk mengedit kod teras atau menambah HTML tersuai. Dengan Elementor, walaupun, platform dikunci atas sebab keselamatan supaya anda tidak boleh menambah acara onClick kepada sebarang objek. Jika anda mempunyai acara onClick tersuai itu ditambahkan pada kod anda, anda tidak mendapat apa-apa jenis ralat… tetapi anda akan melihat kod itu dilucutkan daripada output.

Menggunakan Pendengar jQuery

Satu had metodologi onClick ialah anda perlu mengedit setiap pautan di tapak anda dan menambah kod tersebut. Metodologi alternatif ialah memasukkan skrip dalam halaman yang mendengar untuk klik tertentu pada halaman anda dan ia melaksanakan kod untuk anda. Ini boleh dilakukan dengan mencari mana-mana tanda sauh dengan spesifik kelas CSS. Dalam kes ini, kami menetapkan tag anchor dengan kelas bernama sembang terbuka.

Dalam pengaki tapak, saya hanya menambah medan HTML tersuai 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 luas tapak jadi tanpa mengira halaman, jika saya mempunyai kelas sembang terbuka yang diklik, ia akan membuka tetingkap sembang. Untuk objek Elementor, kami hanya menetapkan pautan ke # dan kelas sebagai sembang terbuka.

pautan elemen

kelas tetapan lanjutan elemen

Sudah tentu, kod boleh dipertingkatkan atau boleh digunakan untuk sebarang jenis acara lain juga, seperti a Acara Analitis Google. Sudah tentu, LiveChat mempunyai integrasi yang luar biasa dengan Google Analitis yang menambahkan acara ini, tetapi saya menyertakannya di bawah 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>

Membina tapak dengan Elementor agak mudah dan saya sangat mengesyorkan platform tersebut. Terdapat komuniti yang hebat, banyak sumber dan beberapa Elementor Add-On yang meningkatkan keupayaan.

Bermula Dengan Elementor Mulakan Dengan LiveChat

Pendedahan: Saya menggunakan pautan afiliasi untuk Elementor dan LiveChat dalam artikel ini. Tapak di mana kami membangunkan penyelesaiannya ialah a Pengeluar Tab Panas di tengah Indiana.