Cum să adăugați chatbot-ul AI Asyntai pe Adobe Experience Manager

Ghid pas cu pas pentru site-uri AEM

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați codul folosind componenta de pagină (recomandat)

Metoda recomandată este să adăugați codul chatbotului în secțiunea head a componentei de pagină AEM pentru instalare pe tot site-ul:

Conectați-vă la instanța AEM Author
Navigați la CRXDE Lite (de obicei la http://your-aem-instance:4502/crx/de)
Localizați șablonul componentei de pagină (de obicei sub /apps/your-project/components/page)
Găsiți sau creați fișierul head.html sau headerlibs.html
Adăugați codul de încorporare Asyntai în acest fișier
Faceți clic pe "Salvează tot" în meniul de sus
Replicați modificările pe instanța dvs. de publicare

Sfat: Plasarea codului în fișierul head.html asigură că chatbotul apare pe toate paginile care folosesc acel șablon. Aceasta este abordarea cea mai curată pentru instalarea pe tot site-ul.

Metoda alternativă 1: Biblioteci client (ClientLibs)

Pentru o abordare mai structurată, puteți utiliza sistemul de biblioteci client al AEM:

Creați un nou folder de bibliotecă client sub /apps/your-project/clientlibs
Setați tipul de nod cq:clientLibraryFolder
Creați un fișier js.txt care listează fișierele JavaScript
Adăugați codul de încorporare Asyntai într-un fișier JavaScript din acest folder
Includeți biblioteca client în componenta paginii dvs. folosind:

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

Notă: Această metodă este recomandată pentru proiecte cu structură ClientLib existentă și oferă o organizare mai bună pentru implementări mai mari.

Metoda alternativă 2: Gestionarea etichetelor (Adobe Launch)

Dacă utilizați Adobe Launch (fost DTM) sau alt manager de etichete:

Conectați-vă la Adobe Experience Platform Launch
Navigați la proprietatea dvs.
Accesați Reguli și creați o regulă nouă
Setați evenimentul la "Page Bottom" sau "DOM Ready"
Adăugați o acțiune: Cod personalizat
Inserați codul de încorporare Asyntai
Salvați și publicați biblioteca

Sfat: Utilizarea Adobe Launch este abordarea recomandată de Adobe pentru adăugarea scripturilor terțe. Oferă un control mai bun, capabilități de testare și nu necesită implementări de cod.

Metoda alternativă 3: Fragment de experiență

Pentru o implementare flexibilă, prietenoasă cu autorii:

Navigați la Fragmente de experiență în AEM
Creați un nou Fragment de experiență
Adăugați o componentă Text sau o componentă HTML
Comutați la modul sursă HTML
Inserați codul de încorporare Asyntai
Includeți acest Fragment de experiență în subsolul șablonului paginii dvs.

Important: Asigurați-vă că aveți permisiunile AEM adecvate pentru a modifica șabloanele și componentele. Pentru AEM ca serviciu Cloud, modificările ar putea fi necesare să treacă prin pipeline-ul dvs. CI/CD.

Pasul 3: Verificați instalarea

După implementarea modificărilor, goliți memoria cache a browserului și vizitați site-ul dvs. Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Verificați consola browserului (F12) pentru erori JavaScript. Verificați dacă codul a fost implementat corect pe instanța dvs. de publicare. Pentru AEM ca serviciu Cloud, asigurați-vă că modificările au trecut cu succes prin pipeline-ul de implementare.