WordPress: jQueryn käyttäminen LiveChat-ikkunan avaamiseen napsauttamalla linkkiä tai painiketta Elementorilla

jQueryn käyttäminen LiveChat-ikkunan avaamiseen napsauttamalla linkkiä tai painiketta Elementorilla

Yhdellä asiakkaistamme on Elementor, yksi vahvimmista sivunrakennusalustoista WordPressille. Olemme auttaneet heitä puhdistamaan saapuvan markkinointinsa viime kuukausina, minimoimaan heidän toteuttamiaan mukautuksia ja parantamaan järjestelmien välistä viestintää – myös analytiikan avulla.

Asiakkaalla on LiveChat, upea chat-palvelu, jossa on vahva Google Analytics -integraatio chat-prosessin jokaiseen vaiheeseen. LiveChatilla on erittäin hyvä sovellusliittymä sen integroimiseksi sivustoosi, mukaan lukien mahdollisuus avata chat-ikkuna käyttämällä ankkuritunnisteessa olevaa onClick-tapahtumaa. Tältä se näyttää:

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

Tämä on kätevää, jos sinulla on mahdollisuus muokata ydinkoodia tai lisätä mukautettua HTML-koodia. Kanssa Elementor, alusta on kuitenkin lukittu turvallisuussyistä, jotta et voi lisätä onClick-tapahtuma mihin tahansa esineeseen. Jos olet lisännyt mukautetun onClick-tapahtuman koodiisi, et saa minkäänlaista virhettä… mutta näet koodin poistuvan ulostuloksesta.

jQuery Listenerin käyttäminen

Yksi onClick-metodologian rajoituksista on, että sinun on muokattava jokaista sivustosi linkkiä ja lisättävä kyseinen koodi. Vaihtoehtoinen menetelmä on sisällyttää sivulle komentosarja, joka kuuntelee tiettyä napsautusta varten sivullasi ja se suorittaa koodin puolestasi. Tämä voidaan tehdä etsimällä mitä tahansa ankkuri tietyn kanssa CSS-luokka. Tässä tapauksessa määritämme ankkuritunnisteen, jonka luokka on nimeltään avoin chat.

Lisään sivuston alatunnisteeseen mukautetun HTML-kentän, jossa on tarvittava komentosarja:

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

Nyt tämä kirjoitus on koko sivuston laajuinen, joten sivusta riippumatta, jos minulla on luokkaa avoin chat sitä napsautetaan, se avaa chat-ikkunan. Elementor-objektille määritimme vain linkin # ja luokaksi as avoin chat.

elementor linkki

elementor lisäasetusluokat

Tietenkin koodia voidaan parantaa tai sitä voidaan käyttää myös mihin tahansa muuhun tapahtumaan, kuten a Google Analytics -tapahtuma. Tietysti LiveChatilla on erinomainen integraatio Google Analyticsin kanssa, joka lisää nämä tapahtumat, mutta sisällytän sen alle vain esimerkkinä:

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

Sivuston rakentaminen Elementorilla on melko yksinkertaista, ja suosittelen alustaa. Siellä on loistava yhteisö, paljon resursseja ja useita Elementor-lisäosia, jotka parantavat ominaisuuksia.

Aloita Elementorin käyttö Aloita LiveChatin käyttö

Ilmoitus: Käytän tytäryhtiölinkkejä Elementor ja LiveChat tässä artikkelissa. Sivusto, jossa kehitimme ratkaisun, on a Hot Tub-valmistaja Indianan keskustassa.