Hvordan legge til Asyntai AI-chatbot i Adobe Experience Manager

Trinn-for-trinn-guide for AEM-nettsteder

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til kode via sidekomponent (anbefalt)

Den anbefalte metoden er å legge til chatbot-koden i AEM-sidekomponentens head-seksjon for installasjon på hele nettstedet:

Logg inn på AEM Author-instansen din
Naviger til CRXDE Lite (vanligvis på http://your-aem-instance:4502/crx/de)
Finn sidekomponentmalen din (vanligvis under /apps/your-project/components/page)
Finn eller opprett filen head.html eller headerlibs.html
Legg til Asyntai-innbyggingskoden din i denne filen
Klikk på «Lagre alle» i toppmenyen
Repliser endringene til publiseringsinstansen din

Tips: Plassering av koden i head.html-filen sikrer at chatboten vises på alle sider som bruker den malen. Dette er den reneste tilnærmingen for installasjon på hele nettstedet.

Alternativ metode 1: Klientbiblioteker (ClientLibs)

For en mer strukturert tilnærming kan du bruke AEMs klientbiblioteksystem:

Opprett en ny klientbibliotekmappe under /apps/your-project/clientlibs
Sett nodetypen cq:clientLibraryFolder
Opprett en js.txt-fil som lister JavaScript-filene dine
Legg til Asyntai-innbyggingskoden din i en JavaScript-fil i denne mappen
Inkluder klientbiblioteket i sidekomponenten din ved å bruke:

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

Merk: Denne metoden anbefales for prosjekter med eksisterende ClientLib-struktur og gir bedre organisering for større implementasjoner.

Alternativ metode 2: Tag-administrasjon (Adobe Launch)

Hvis du bruker Adobe Launch (tidligere DTM) eller en annen tag-manager:

Logg inn på Adobe Experience Platform Launch
Naviger til eiendommen din
Gå til Regler og opprett en ny regel
Sett hendelsen til «Page Bottom» eller «DOM Ready»
Legg til en handling: Egendefinert kode
Lim inn Asyntai-innbyggingskoden din
Lagre og publiser biblioteket

Tips: Å bruke Adobe Launch er Adobes anbefalte tilnærming for å legge til tredjepartsskript. Det gir bedre kontroll, testmuligheter og krever ikke kodeutrullinger.

Alternativ metode 3: Experience Fragment

For fleksibel, forfattervennlig implementasjon:

Naviger til Experience Fragments i AEM
Opprett et nytt Experience Fragment
Legg til en tekstkomponent eller HTML-komponent
Bytt til HTML-kildemodus
Lim inn Asyntai-innbyggingskoden din
Inkluder dette Experience Fragment i sidemalen din i bunnteksten

Viktig: Sørg for at du har riktige AEM-tillatelser til å endre maler og komponenter. For AEM as a Cloud Service kan endringer måtte gå gjennom CI/CD-pipelinen din.

Trinn 3: Bekreft installasjonen

Etter at endringene er distribuert, tøm nettleserens hurtigbuffer og besøk nettstedet ditt. Du bør se chat-widget-knappen i nedre høyre hjørne. Klikk på den for å sikre at den åpnes og fungerer korrekt.

Ser du ikke widgeten? Sjekk nettleserkonsollen (F12) for JavaScript-feil. Bekreft at koden ble riktig distribuert til publiseringsinstansen din. For AEM as a Cloud Service, sørg for at endringene gikk gjennom distribusjonspipelinen.