Come aggiungere il chatbot IA Asyntai ad Adobe Experience Manager

Guida passo passo per siti web AEM

Piattaforma:

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

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

Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.

Passaggio 2: Aggiungi il codice utilizzando il componente pagina (consigliato)

Il metodo consigliato è aggiungere il codice del chatbot nella sezione head del componente pagina AEM per un'installazione su tutto il sito:

Accedi alla tua istanza AEM Author
Naviga a CRXDE Lite (generalmente su http://your-aem-instance:4502/crx/de)
Individua il template del componente pagina (generalmente sotto /apps/your-project/components/page)
Trova o crea il file head.html o headerlibs.html
Aggiungi il tuo codice di incorporamento Asyntai a questo file
Fai clic su "Salva tutto" nel menu in alto
Replica le modifiche sulla tua istanza di pubblicazione

Suggerimento: Inserire il codice nel file head.html garantisce che il chatbot appaia su tutte le pagine che utilizzano quel template. Questo è l'approccio più pulito per un'installazione su tutto il sito.

Metodo alternativo 1: librerie client (ClientLibs)

Per un approccio più strutturato, puoi utilizzare il sistema di librerie client di AEM:

Crea una nuova cartella di libreria client sotto /apps/your-project/clientlibs
Imposta il tipo di nodo cq:clientLibraryFolder
Crea un file js.txt che elenchi i tuoi file JavaScript
Aggiungi il tuo codice di incorporamento Asyntai a un file JavaScript in questa cartella
Includi la libreria client nel tuo componente pagina usando:

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

Nota: Questo metodo è consigliato per progetti con una struttura ClientLib esistente e offre una migliore organizzazione per implementazioni più grandi.

Metodo alternativo 2: gestione tag (Adobe Launch)

Se stai utilizzando Adobe Launch (precedentemente DTM) o un altro tag manager:

Accedi ad Adobe Experience Platform Launch
Naviga alla tua proprietà
Vai a Regole e crea una nuova regola
Imposta l'evento su "Page Bottom" o "DOM Ready"
Aggiungi un'azione: Codice personalizzato
Incolla il tuo codice di incorporamento Asyntai
Salva e pubblica la libreria

Suggerimento: Utilizzare Adobe Launch è l'approccio consigliato da Adobe per aggiungere script di terze parti. Offre un controllo migliore, capacità di test e non richiede il deployment del codice.

Metodo alternativo 3: Experience Fragment

Per un'implementazione flessibile e adatta agli autori:

Naviga agli Experience Fragment in AEM
Crea un nuovo Experience Fragment
Aggiungi un componente Testo o un componente HTML
Passa alla modalità sorgente HTML
Incolla il tuo codice di incorporamento Asyntai
Includi questo Experience Fragment nel footer del template della tua pagina

Importante: Assicurati di avere le autorizzazioni AEM adeguate per modificare template e componenti. Per AEM as a Cloud Service, le modifiche potrebbero dover passare attraverso la pipeline CI/CD.

Passaggio 3: verifica l'installazione

Dopo aver distribuito le modifiche, svuota la cache del browser e visita il tuo sito web. Dovresti vedere il pulsante del widget di chat nell'angolo in basso a destra. Fai clic per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Controlla la console del browser (F12) per errori JavaScript. Verifica che il codice sia stato distribuito correttamente sulla tua istanza di pubblicazione. Per AEM as a Cloud Service, assicurati che le modifiche siano passate con successo attraverso la pipeline di deployment.