Retour au tableau de bord

Documentation

Apprenez à utiliser Asyntai

Premiers pas
Installation Base de connaissances Tester votre IA Gérer les sites web
Personnalisation
Couleurs du widget Nom de l'assistant IA Message initial Position du widget Déclenchement automatique Bulle de salutation Badge de messages non lus Mode instruction Poser des questions Utiliser les émojis Collecter les e-mails Collecter les numéros de téléphone Capture intelligente de prospects Localisation Masquer la marque Lien de confidentialité Avis personnalisé Téléchargement de la transcription Nouvelle conversation Historique des conversations Slogan et point de statut Reconnaissance vocale Icône de chat Logo de l'entreprise Limite de caractères Température
Conseils pour les instructions IA Comparer les forfaits
Fonctionnalités
Exploration du site web Lacunes de connaissances Fiches produits Fiches produit dynamiques Dynamic Images Contexte utilisateur Surveillance en direct Prise en charge humaine Escalade Notifications IA Rapport quotidien Flux de données en temps réel Flux de données en temps réel Max Membres de l’équipe Authentification unique Inclure des images Vision par image Widget de traduction Localisation Prospects Capture intelligente de prospects Tickets de support Réservations Intégrations Exclure des pages IPs bloquées Modèle plus intelligent Activer la réflexion Suggestions de réponse Messages de suivi Reconnaissance vocale Téléchargement de la transcription Chat intégré
Analyses
Analytique du chat Journaux de chat
Intégrations
API REST Instagram Messenger WhatsApp Zapier Email Applications mobiles
Autre
Ajouter à l’écran d’accueil Bouton d’ouverture personnalisé
Demander à l'IA

Comment ajouter le chatbot IA Asyntai à Grav

Guide étape par étape pour Grav CMS

Obtenir le code d'intégration
Plateforme :
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Docusaurus Docusaurus Hugo Hugo Kentico Kentico Volusion Volusion Craft CMS Craft CMS Contentful Contentful Strapi Strapi Joomla Joomla Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Statamic Statamic Umbraco Umbraco Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

É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 au modèle de thème Grav (recommandé)

La meilleure façon d'ajouter le chatbot à toutes les pages de votre site Grav est de modifier le template Twig de base de votre thème :

  1. Accédez au répertoire user/themes/yourtheme/templates/ de votre projet Grav et ouvrez default.html.twig (ou le modèle de base utilisé par votre thème)
  2. Ajoutez votre code d'intégration Asyntai avant la balise fermante </body> :
<!-- user/themes/yourtheme/templates/default.html.twig --> ... <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body> </html>
  1. Enregistrez le fichier

Astuce : Grav utilise Twig comme moteur de modèles. Le modèle de base est généralement default.html.twig ou partials/base.html.twig selon votre thème. Vérifiez la structure de votre thème pour trouver le fichier correct contenant la balise fermante </body>.

Méthode alternative 1 : Utilisation du gestionnaire d'assets Grav

Le gestionnaire de ressources intégré de Grav offre un moyen propre d'ajouter des ressources JavaScript via Twig :

  1. Ouvrez le modèle Twig de base de votre thème (par ex., user/themes/yourtheme/templates/partials/base.html.twig)
  2. Utilisez l'Asset Manager pour ajouter le JavaScript :
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Ou ajoutez du JavaScript en ligne pour créer dynamiquement l'élément script dans votre modèle de base :

<!-- user/themes/yourtheme/templates/partials/base.html.twig --> ... {% block bottom %} {{ assets.js('bottom') }} {% endblock %} <script> (function() { var script = document.createElement('script'); script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); script.async = true; document.body.appendChild(script); })(); </script> </body> </html>

Note : La méthode Asset Manager est l'approche recommandée par Grav pour gérer les ressources JavaScript. Elle offre une prise en charge intégrée du regroupement, de l'ordonnancement et du classement des ressources.

Méthode alternative 2 : Utilisation d'un plugin JS personnalisé

Si vous préférez une approche basée sur un plugin sans modifier les fichiers du thème :

  1. Installez le plugin "Custom JS" depuis le panneau d'administration Grav ou via CLI :
bin/gpm install custom-js
  1. Accédez à Admin > Plugins > Custom JS
  2. Ajoutez le code du script d'intégration :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  1. Enregistrez la configuration du plugin

Astuce : L'utilisation d'un plugin pour injecter des scripts signifie que vous n'avez pas besoin de modifier les fichiers du thème. Cela facilite le changement ou la mise à jour des thèmes sans perdre votre intégration de chatbot.

Méthode alternative 3 : Utilisation de la surcharge de bloc dans un modèle enfant

Si votre thème Grav utilise l'héritage de blocs Twig, vous pouvez surcharger le bloc du bas dans un modèle enfant :

{% block bottom %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
  1. Créez ou ouvrez un modèle enfant qui étend le modèle de base de votre thème
  2. Ajoutez le remplacement de bloc indiqué ci-dessus
  3. L'appel parent() garantit que tout le contenu existant dans le bloc est préservé

Note : Cette méthode utilise le système d'héritage de templates de Twig. Assurez-vous que le nom du bloc (par exemple, bottom) correspond au bloc défini dans le template de base de votre thème. Les noms de blocs courants incluent bottom, javascripts ou footer.

Méthode alternative 4 : Utilisation du plugin Custom Head de Grav

Une autre option basée sur un plugin est le plugin Custom Head :

  1. Installez le plugin custom-head via CLI ou le panneau d'administration :
bin/gpm install custom-head
  1. Accédez à Admin > Plugins > Custom Head
  2. Ajoutez votre code de script d'intégration Asyntai dans la configuration du plugin :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  1. Enregistrez la configuration

Astuce : Le plugin Custom Head vous permet d'injecter du code dans les sections head ou body de votre site sans toucher aux fichiers du thème. Consultez la documentation du plugin pour connaître l'option de placement correcte afin d'insérer le script avant la balise fermante </body>.

Étape 3 : Vider le cache et vérifier

Après avoir ajouté le code, videz le cache de Grav et vérifiez l'installation :

# Clear cache via CLI bin/grav clearcache # Or clear cache from Admin Panel: # Admin > Tools > Clear Cache

Ouvrez votre site Grav dans un nouvel onglet du navigateur. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit. Cliquez dessus pour vous assurer qu'il s'ouvre et fonctionne correctement.

Vous ne voyez pas le widget ? Assurez-vous d'avoir vidé le cache de Grav avec bin/grav clearcache ou depuis le panneau d'administration. Vérifiez que vous avez remplacé YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord. Videz le cache de votre navigateur ou consultez le site en mode navigation privée. Ouvrez la console du navigateur (F12) pour vérifier s'il y a des erreurs JavaScript. Vérifiez que le script est présent dans le code source de la page en faisant un clic droit et en sélectionnant « Afficher le code source de la page ».