WordPress: A jQuery használata LiveChat ablak megnyitásához linkre vagy gombra kattintva az Elementor használatával

A jQuery használata LiveChat ablak megnyitásához egy hivatkozásra vagy gombra kattintva az Elementor használatával

Egyik ügyfelünknek van Elementor, az egyik legrobusztusabb oldalépítő platform a WordPress számára. Az elmúlt néhány hónapban segítettünk nekik a bejövő marketing tevékenységeik megtisztításában, minimalizálva az általuk végrehajtott testreszabásokat, és jobbá téve a rendszerek kommunikációját – többek között az analitikával.

Az ügyfélnek van LiveChat, egy fantasztikus csevegőszolgáltatás, amely robusztus Google Analytics-integrációval rendelkezik a csevegési folyamat minden lépéséhez. A LiveChat nagyon jó API-val rendelkezik a webhelybe való integráláshoz, beleértve a csevegőablak megnyitását egy onClick esemény segítségével egy horgonycímkében. Így néz ki:

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

Ez akkor hasznos, ha szerkesztheti az alapvető kódot vagy hozzáadhat egyéni HTML-t. Val vel Elementor, azonban a platform biztonsági okokból le van zárva, így nem adhat hozzá egy onClick esemény bármilyen tárgyra. Ha ezt az egyéni onClick eseményt hozzáadta a kódhoz, akkor semmilyen típusú hiba nem jelenik meg… de látni fogja, hogy a kód kikerül a kimenetből.

jQuery Listener használata

Az onClick módszertan egyik korlátja, hogy a webhelyén lévő minden egyes hivatkozást szerkesztenie kell, és hozzá kell adnia a kódot. Alternatív módszer az, hogy egy szkriptet helyezünk el az oldalon figyel egy adott kattintáshoz az oldalon, és végrehajtja a kódot az Ön helyett. Ezt bármelyik megkeresésével megteheti horgonycímke egy konkrét CSS osztály. Ebben az esetben egy horgonycímkét jelölünk ki egy nevű osztállyal openchat.

A webhely láblécébe csak hozzáadok egy egyéni HTML-mezőt a szükséges szkripttel:

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

Nos, ez a szkript az egész webhelyre kiterjed, így az oldaltól függetlenül, ha van osztályom openchat rákattintva megnyílik a csevegőablak. Az Elementor objektumhoz csak a hivatkozást #-re, az osztályt pedig as-ra állítottuk openchat.

elemor link

elementor speciális beállítások osztályok

Természetesen a kód továbbfejleszthető, vagy bármilyen más típusú eseményhez is használható, például a Google Analytics esemény. Természetesen a LiveChat kiválóan integrálódik a Google Analytics szolgáltatással, amely hozzáadja ezeket az eseményeket, de az alábbiakban csak példaként közlöm:

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

A webhely felépítése az Elementor segítségével meglehetősen egyszerű, és nagyon ajánlom a platformot. Van egy nagyszerű közösség, rengeteg erőforrás és jó néhány Elementor-bővítmény, amelyek fejlesztik a képességeket.

Kezdje el az Elementor használatát Kezdje el a LiveChat szolgáltatást

Közzététel: Partneri linkeket használok a következőhöz: Elementor és a LiveChat ebben a cikkben. Az oldal, ahol a megoldást fejlesztettük, a Pezsgőfürdő gyártója Indiana központjában.