Kako dodati klepetalnik Asyntai z UI v Adobe Experience Manager

Vodič po korakih za spletne strani AEM

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte kodo z uporabo komponente strani (priporočeno)

Priporočeni način je dodajanje kode klepetalnika v razdelek head komponente strani AEM za namestitev na celotnem mestu:

Prijavite se v svojo avtorsko instanco AEM
Pojdite na CRXDE Lite (običajno na http://your-aem-instance:4502/crx/de)
Poiščite predlogo komponente strani (običajno pod /apps/your-project/components/page)
Poiščite ali ustvarite datoteko head.html ali headerlibs.html
Dodajte svojo vdelovalno kodo Asyntai v to datoteko
Kliknite "Shrani vse" v zgornjem meniju
Replicirajte spremembe na svojo produkcijsko instanco

Nasvet: Umestitev kode v datoteko head.html zagotavlja, da se klepetalnik prikaže na vseh straneh, ki uporabljajo to predlogo. To je najčistejši pristop za namestitev na celotnem mestu.

Alternativni način 1: Odjemalske knjižnice (ClientLibs)

Za bolj strukturiran pristop lahko uporabite sistem odjemalskih knjižnic AEM:

Ustvarite novo mapo odjemalske knjižnice pod /apps/your-project/clientlibs
Nastavite tip vozlišča cq:clientLibraryFolder
Ustvarite datoteko js.txt s seznamom vaših datotek JavaScript
Dodajte svojo vdelovalno kodo Asyntai v datoteko JavaScript v tej mapi
Vključite odjemalsko knjižnico v komponento strani z uporabo:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Opomba: Ta način je priporočen za projekte z obstoječo strukturo ClientLib in zagotavlja boljšo organizacijo za večje izvedbe.

Alternativni način 2: Upravljanje oznak (Adobe Launch)

Če uporabljate Adobe Launch (prej DTM) ali drug upravljalnik oznak:

Prijavite se v Adobe Experience Platform Launch
Pojdite na svojo lastnost
Pojdite na Pravila in ustvarite novo pravilo
Nastavite dogodek na "Page Bottom" ali "DOM Ready"
Dodajte dejanje: Koda po meri
Prilepite svojo vdelovalno kodo Asyntai
Shranite in objavite knjižnico

Nasvet: Uporaba Adobe Launch je pristop, ki ga Adobe priporoča za dodajanje skriptov tretjih strank. Zagotavlja boljši nadzor, zmožnosti testiranja in ne zahteva nameščanja kode.

Alternativni način 3: Fragment izkušnje

Za prilagodljivo, avtorjem prijazno izvedbo:

Pojdite na Fragmente izkušnje v AEM
Ustvarite nov fragment izkušnje
Dodajte besedilno komponento ali komponento HTML
Preklopite na način izvorne kode HTML
Prilepite svojo vdelovalno kodo Asyntai
Vključite ta fragment izkušnje v nogo predloge strani

Pomembno: Prepričajte se, da imate ustrezna dovoljenja AEM za spreminjanje predlog in komponent. Za AEM kot oblačno storitev bo morda treba spremembe poslati skozi vaš cevovod CI/CD.

Korak 3: Preverite namestitev

Po namestitvi sprememb počistite predpomnilnik brskalnika in obiščite svojo spletno stran. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Preverite konzolo brskalnika (F12) za napake JavaScript. Preverite, ali je bila koda pravilno nameščena na vašo produkcijsko instanco. Za AEM kot oblačno storitev se prepričajte, da so vaše spremembe uspešno prešle skozi cevovod namestitve.