Hur du lägger till Asyntai AI-chattbot i Adobe Experience Manager

Steg-för-steg-guide för AEM-webbplatser

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till kod med sidkomponent (rekommenderas)

Den rekommenderade metoden är att lägga till chattbotkoden i head-sektionen på din AEM-sidkomponent för webbplatsövergripande installation:

Logga in på din AEM Author-instans
Navigera till CRXDE Lite (vanligtvis på http://your-aem-instance:4502/crx/de)
Hitta din sidkomponentmall (vanligtvis under /apps/your-project/components/page)
Hitta eller skapa filen head.html eller headerlibs.html
Lägg till din Asyntai-inbäddningskod i den här filen
Klicka på "Spara alla" i toppmenyn
Replikera ändringarna till din publiceringsinstans

Tips: Att placera koden i filen head.html säkerställer att chattboten visas på alla sidor som använder den mallen. Detta är det renaste sättet för installation på hela webbplatsen.

Alternativ metod 1: Klientbibliotek (ClientLibs)

För ett mer strukturerat tillvägagångssätt kan du använda AEM:s klientbibliotekssystem:

Skapa en ny klientbiblioteksmapp under /apps/your-project/clientlibs
Ange nodtypen cq:clientLibraryFolder
Skapa en js.txt-fil som listar dina JavaScript-filer
Lägg till din Asyntai-inbäddningskod i en JavaScript-fil i den här mappen
Inkludera klientbiblioteket i din sidkomponent med:

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

Obs! Den här metoden rekommenderas för projekt med befintlig ClientLib-struktur och ger bättre organisation för större implementeringar.

Alternativ metod 2: Tagghantering (Adobe Launch)

Om du använder Adobe Launch (tidigare DTM) eller en annan tagghanterare:

Logga in på Adobe Experience Platform Launch
Navigera till din egendom
Gå till Regler och skapa en ny regel
Ställ in händelsen till "Page Bottom" eller "DOM Ready"
Lägg till en åtgärd: Anpassad kod
Klistra in din Asyntai-inbäddningskod
Spara och publicera biblioteket

Tips: Att använda Adobe Launch är Adobes rekommenderade metod för att lägga till tredjepartsskript. Det ger bättre kontroll, testmöjligheter och kräver inte koddistributioner.

Alternativ metod 3: Experience Fragment

För flexibel, redaktörsvänlig implementering:

Navigera till Experience Fragments i AEM
Skapa ett nytt Experience Fragment
Lägg till en textkomponent eller HTML-komponent
Växla till HTML-källkodsläge
Klistra in din Asyntai-inbäddningskod
Inkludera detta Experience Fragment i sidfotsmallen för din sida

Viktigt: Se till att du har rätt AEM-behörigheter för att ändra mallar och komponenter. För AEM as a Cloud Service kan ändringar behöva gå genom din CI/CD-pipeline.

Steg 3: Verifiera installationen

Efter att du har driftsatt dina ändringar, rensa webbläsarcachen och besök din webbplats. Du bör se widgetknappen för chatten i det nedre högra hörnet. Klicka på den för att säkerställa att den öppnas och fungerar korrekt.

Ser du inte widgeten? Kontrollera din webbläsarkonsol (F12) för JavaScript-fel. Verifiera att koden distribuerades korrekt till din publiceringsinstans. För AEM as a Cloud Service, se till att dina ändringar gick igenom distributionspipelinen framgångsrikt.