Comment ajouter le chatbot IA Asyntai à Adobe Experience Manager

Guide étape par étape pour les sites AEM

Plateforme :

Étape 1 : Obtenir votre code d'intégration

Tout d'abord, rendez-vous sur votre Tableau de bord Asyntai et faites défiler jusqu'à la section « Code d'intégration ». Copiez votre code d'intégration unique qui ressemblera à ceci :

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

Note : Le code ci-dessus n'est qu'un exemple. Vous devez copier votre propre code d'intégration depuis votre Tableau de bord car il contient votre identifiant de widget personnel.

Étape 2 : Ajouter le code via le composant de page (recommandé)

La méthode recommandée est d'ajouter le code du chatbot dans la section head du composant de page de votre AEM pour une installation sur l'ensemble du site :

Connectez-vous à votre instance AEM Author
Accédez à CRXDE Lite (généralement à l'adresse http://your-aem-instance:4502/crx/de)
Localisez le modèle de composant de votre page (généralement sous /apps/your-project/components/page)
Trouvez ou créez le fichier head.html ou headerlibs.html
Ajoutez votre code d'intégration Asyntai à ce fichier
Cliquez sur "Save All" dans le menu supérieur
Répliquez les modifications vers votre instance de publication

Astuce : Placer le code dans le fichier head.html garantit que le chatbot apparaît sur toutes les pages utilisant ce modèle. C'est l'approche la plus propre pour une installation à l'échelle du site.

Méthode alternative 1 : Bibliothèques client (ClientLibs)

Pour une approche plus structurée, vous pouvez utiliser le système de bibliothèques client d'AEM :

Créez un nouveau dossier de bibliothèque client sous /apps/your-project/clientlibs
Définissez le type de noeud cq:clientLibraryFolder
Créez un fichier js.txt listant vos fichiers JavaScript
Ajoutez votre code d'intégration Asyntai à un fichier JavaScript dans ce dossier
Incluez la bibliothèque client dans votre composant de page en utilisant :

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

Note : Cette méthode est recommandée pour les projets disposant d'une structure ClientLib existante et offre une meilleure organisation pour les implémentations de grande envergure.

Méthode alternative 2 : Gestion des balises (Adobe Launch)

Si vous utilisez Adobe Launch (anciennement DTM) ou un autre gestionnaire de balises :

Connectez-vous à Adobe Experience Platform Launch
Accédez à votre propriété
Accédez à Règles et créez une nouvelle règle
Définissez l'événement sur « Page Bottom » ou « DOM Ready »
Ajoutez une action : Code personnalisé
Collez votre code d'intégration Asyntai
Enregistrez et publiez la bibliothèque

Astuce : L'utilisation d'Adobe Launch est l'approche recommandée par Adobe pour l'ajout de scripts tiers. Elle offre un meilleur contrôle, des capacités de test et ne nécessite pas de déploiements de code.

Méthode alternative 3 : Fragment d'expérience

Pour une implémentation flexible et conviviale pour les auteurs :

Accédez à Experience Fragments dans AEM
Créez un nouveau Experience Fragment
Ajoutez un composant Texte ou un composant HTML
Passez en mode source HTML
Collez votre code d'intégration Asyntai
Incluez ce Experience Fragment dans le pied de page de votre modèle de page

Important : Assurez-vous de disposer des autorisations AEM appropriées pour modifier les modèles et les composants. Pour AEM as a Cloud Service, les modifications devront peut-être passer par votre pipeline CI/CD.

Étape 3 : Vérifier l'installation

Après avoir déployé vos modifications, videz le cache de votre navigateur et visitez votre site web. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit. Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement.

Vous ne voyez pas le widget ? Vérifiez la console de votre navigateur (F12) pour les erreurs JavaScript. Vérifiez que le code a été correctement déployé sur votre instance de publication. Pour AEM as a Cloud Service, assurez-vous que vos modifications ont bien été traitées par le pipeline de déploiement.