WordPress: jQuery izmantošana, lai atvērtu LiveChat logu, noklikšķinot uz saites vai pogas, izmantojot Elementor

Izmantojot jQuery, lai atvērtu LiveChat logu, noklikšķinot uz saites vai pogas, izmantojot Elementor

Vienam no mūsu klientiem ir Elementor, viena no spēcīgākajām lapu veidošanas platformām WordPress. Mēs esam palīdzējuši viņiem sakārtot ienākošā mārketinga pasākumus pēdējo dažu mēnešu laikā, līdz minimumam samazinot ieviestos pielāgojumus un uzlabojot sistēmu saziņu, tostarp izmantojot analīzi.

Klientam ir LiveChat, fantastisks tērzēšanas pakalpojums, kurā ir spēcīga Google Analytics integrācija katrā tērzēšanas procesa posmā. LiveChat ir ļoti labs API tās integrēšanai jūsu vietnē, tostarp iespēja atvērt tērzēšanas logu, izmantojot onClick notikumu enkura tagā. Lūk, kā tas izskatās:

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

Tas ir ērti, ja jums ir iespēja rediģēt pamatkodu vai pievienot pielāgotu HTML. Ar Elementor, tomēr platforma drošības apsvērumu dēļ ir bloķēta, lai jūs nevarētu pievienot onClick notikums uz jebkuru objektu. Ja jūsu kodam ir pievienots pielāgotais onClick notikums, jūs nesaņemat nekāda veida kļūdu, taču redzēsit, ka kods tiks noņemts no izvades.

Izmantojot jQuery Listener

Viens no onClick metodoloģijas ierobežojumiem ir tāds, ka jums ir jārediģē katra saite savā vietnē un jāpievieno šis kods. Alternatīva metodika ir iekļaut skriptu lapā, kas klausās konkrētam klikšķim uz jūsu lapas, un tā izpilda kodu jūsu vietā. To var izdarīt, meklējot jebkuru enkura zīme ar konkrētu CSS klase. Šajā gadījumā mēs apzīmējam enkura tagu ar nosauktu klasi openchat.

Vietnes kājenē es vienkārši pievienoju pielāgotu HTML lauku ar nepieciešamo skriptu:

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

Tagad šis skripts ir visā vietnē, tāpēc neatkarīgi no lapas, ja man ir klase openchat Noklikšķinot uz tā, tiks atvērts tērzēšanas logs. Objektam Elementor mēs vienkārši iestatījām saiti uz # un klasi kā openchat.

elementor saite

elementor papildu iestatījumu klases

Protams, kodu var uzlabot vai izmantot arī jebkura cita veida notikumiem, piemēram, a Google Analytics notikums. Protams, LiveChat ir izcila integrācija ar Google Analytics, kas pievieno šos notikumus, taču es to iekļauju tālāk tikai kā piemēru.

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

Vietnes izveide, izmantojot Elementor, ir diezgan vienkārša, un es ļoti iesaku šo platformu. Ir lieliska kopiena, daudz resursu un diezgan daudz Elementor papildinājumu, kas uzlabo iespējas.

Sāciet darbu ar Elementor Sāciet darbu ar LiveChat

Informācijas atklāšana: Es izmantoju saistītās saites vietnei Elementor un LiveChat šajā rakstā. Vietne, kurā mēs izstrādājām risinājumu, ir a Karstās vannu ražotājs Indiānas centrālajā daļā.