Kako dodati Asyntai AI chatbot na Adobe Experience Manager

Vodič korak po korak za AEM web stranice

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte kod koristeći komponentu stranice (preporučeno)

Preporučena metoda je dodavanje koda chatbota u odjeljak zaglavlja komponente stranice vašeg AEM-a za instalaciju na cijeloj stranici:

Prijavite se na svoju AEM Author instancu
Navigirajte na CRXDE Lite (obično na http://vasa-aem-instanca:4502/crx/de)
Pronađite predložak komponente stranice (obično pod /apps/vas-projekt/components/page)
Pronađite ili kreirajte datoteku head.html ili headerlibs.html
Dodajte svoj Asyntai kod za ugradnju u ovu datoteku
Kliknite "Spremi sve" u gornjem izborniku
Replicirajte promjene na svoju instancu za objavljivanje

Savjet: Postavljanje koda u datoteku head.html osigurava da se chatbot pojavljuje na svim stranicama koje koriste taj predložak. To je najčišći pristup za instalaciju na cijeloj stranici.

Alternativna metoda 1: Klijentske biblioteke (ClientLibs)

Za strukturiraniji pristup možete koristiti AEM sustav klijentskih biblioteka:

Kreirajte novu mapu klijentske biblioteke pod /apps/vas-projekt/clientlibs
Postavite tip čvora cq:clientLibraryFolder
Izradite js.txt datoteku s popisom vaših JavaScript datoteka
Dodajte svoj Asyntai kod za ugradnju u JavaScript datoteku u ovoj mapi
Uključite klijentsku biblioteku u svoju komponentu stranice koristeći:

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

Napomena: Ova metoda se preporučuje za projekte s postojećom ClientLib strukturom i pruža bolju organizaciju za veće implementacije.

Alternativna metoda 2: Upravljanje oznakama (Adobe Launch)

Ako koristite Adobe Launch (ranije DTM) ili drugi upravitelj oznaka:

Prijavite se na Adobe Experience Platform Launch
Navigirajte na svoju postavku
Idite na Pravila i kreirajte novo pravilo
Postavite događaj na "Dno stranice" ili "DOM spreman"
Dodajte akciju: Prilagođeni kod
Zalijepite svoj Asyntai kod za ugradnju
Spremite i objavite biblioteku

Savjet: Korištenje Adobe Launcha je pristup koji Adobe preporučuje za dodavanje skripti trećih strana. Pruža bolju kontrolu, mogućnosti testiranja i ne zahtijeva implementacije koda.

Alternativna metoda 3: Fragment iskustva

Za fleksibilnu implementaciju prilagođenu autorima:

Navigirajte na Fragmente iskustva u AEM-u
Kreirajte novi fragment iskustva
Dodajte tekstualnu komponentu ili HTML komponentu
Prebacite se na način HTML izvora
Zalijepite svoj Asyntai kod za ugradnju
Uključite ovaj fragment iskustva u podnožje predloška stranice

Važno: Osigurajte da imate odgovarajuće AEM dozvole za izmjenu predložaka i komponenti. Za AEM kao uslugu u oblaku, promjene će možda morati proći kroz vaš CI/CD cjevovod.

Korak 3: Provjerite instalaciju

Nakon implementacije promjena, očistite predmemoriju preglednika i posjetite svoju web stranicu. Trebali biste vidjeti gumb chat widgeta u donjem desnom kutu. Kliknite ga da biste provjerili otvara li se i funkcionira li ispravno.

Ne vidite widget? Provjerite konzolu preglednika (F12) za JavaScript greške. Provjerite je li kod ispravno implementiran na vašu instancu za objavljivanje. Za AEM kao uslugu u oblaku, osigurajte da su vaše promjene uspješno prošle kroz cjevovod implementacije.