Sådan tilføjer du Asyntai AI-chatbot til Adobe Experience Manager

Trin-for-trin-vejledning til AEM-hjemmesider

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Tilføj kode ved hjælp af sidekomponent (anbefalet)

Den anbefalede metode er at tilføje chatbot-koden til head-sektionen i din AEM-sidekomponent for installation på hele webstedet:

Log ind på din AEM Author-instans
Naviger til CRXDE Lite (typisk på http://din-aem-instans:4502/crx/de)
Find din sidekomponentskabelon (normalt under /apps/dit-projekt/components/page)
Find eller opret filen head.html eller headerlibs.html
Tilføj din Asyntai indlejringskode til denne fil
Klik på "Gem alle" i øverste menu
Replikér ændringerne til din publiceringsinstans

Tip: Placering af koden i filen head.html sikrer, at chatbotten vises på alle sider, der bruger den skabelon. Dette er den reneste tilgang til installation på hele webstedet.

Alternativ metode 1: Klientbiblioteker (ClientLibs)

For en mere struktureret tilgang kan du bruge AEM's klientbibliotekssystem:

Opret en ny klientbiblioteksmappe under /apps/dit-projekt/clientlibs
Angiv nodetypen cq:clientLibraryFolder
Opret en js.txt-fil, der viser dine JavaScript-filer
Tilføj din Asyntai indlejringskode til en JavaScript-fil i denne mappe
Inkluder klientbiblioteket i din sidekomponent ved hjælp af:

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

Bemærk: Denne metode anbefales til projekter med eksisterende ClientLib-struktur og giver bedre organisering til større implementeringer.

Alternativ metode 2: Tag Management (Adobe Launch)

Hvis du bruger Adobe Launch (tidligere DTM) eller en anden tag-manager:

Log ind på Adobe Experience Platform Launch
Naviger til din egenskab
Gå til Regler og opret en ny regel
Indstil begivenheden til "Sidens bund" eller "DOM klar"
Tilføj en handling: Brugerdefineret kode
Indsæt din Asyntai indlejringskode
Gem og publicér biblioteket

Tip: Brug af Adobe Launch er Adobes anbefalede tilgang til tilføjelse af tredjepartsscripts. Det giver bedre kontrol, testmuligheder og kræver ikke kodeimplementeringer.

Alternativ metode 3: Experience Fragment

For en fleksibel, forfattervenlig implementering:

Naviger til Experience Fragments i AEM
Opret et nyt Experience Fragment
Tilføj en tekstkomponent eller HTML-komponent
Skift til HTML-kildetilstand
Indsæt din Asyntai indlejringskode
Inkluder dette Experience Fragment i din sideskabelons sidefod

Vigtigt: Sørg for, at du har de rette AEM-tilladelser til at ændre skabeloner og komponenter. For AEM as a Cloud Service skal ændringer muligvis gå igennem din CI/CD-pipeline.

Trin 3: Verificér installationen

Når du har implementeret dine ændringer, skal du rydde din browsers cache og besøge din hjemmeside. Du bør se chat-widget-knappen i nederste højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Tjek din browsers konsol (F12) for JavaScript-fejl. Verificér, at koden er korrekt implementeret på din publiceringsinstans. For AEM as a Cloud Service skal du sikre, at dine ændringer er gået igennem implementeringspipelinen.