Comment ajouter le chatbot IA Asyntai à Statamic

Guide étape par étape pour les sites Statamic CMS

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 : Choisir la méthode d'installation

Statamic prend en charge les moteurs de modèles Antlers et Blade. Choisissez la méthode en fonction du moteur de modèles que vous utilisez :

Méthode 1 : mise en page Antlers (recommandée)

La façon la plus simple d'ajouter le chatbot est de l'inclure dans votre fichier de mise en page principal. Statamic utilise Antlers comme moteur de templates par défaut.

Accédez au répertoire resources/views de votre projet Statamic
Open your layout file (usually layout.antlers.html)
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Astuce : The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Méthode 2 : mise en page Blade

If you're using Blade templates instead of Antlers, follow these steps:

Accédez au répertoire resources/views de votre projet Statamic
Open your Blade layout file (e.g., layout.blade.php)
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Note : In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Méthode 3 : utilisation d'un partial

Pour une meilleure organisation, vous pouvez créer un partial réutilisable pour le chatbot :

Étape 1 : Créer le partiel

Créez un nouveau fichier à l'emplacement resources/views/partials/_chatbot.antlers.html
Ajoutez votre code d'intégration Asyntai à ce fichier :
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Étape 2 : Inclure dans votre mise en page

Open your layout file (layout.antlers.html)
Ajoutez la balise partial avant </body> :
{{ partial:chatbot }} </body>

Pourquoi utiliser un partial ? Les partiels facilitent la gestion des scripts externes en un seul endroit. Si vous devez mettre à jour le code du chatbot, vous n'avez qu'un seul fichier à modifier.

Utilisation de plusieurs mises en page

Si votre site Statamic utilise plusieurs mises en page (par exemple, des mises en page différentes pour les articles de blog, les pages de destination, etc.), assurez-vous d'ajouter le script du chatbot à chaque fichier de mise en page où vous souhaitez que le widget apparaisse.

You can set which layout a page uses in several ways:

Dans l'entrée : Ajoutez layout: your_layout au front matter
Dans la collection : Définissez une mise en page par défaut dans le fichier de configuration YAML de votre collection
Dans un blueprint : Ajoutez un champ de mise en page que les éditeurs peuvent sélectionner

Pour les Starter Kits Statamic

Si vous utilisez un Starter Kit Statamic, l'emplacement de la mise en page peut varier. Les emplacements courants incluent :

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html avec des partiels dans resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Étape 3 : Vider le cache et vérifier

Après avoir ajouté le code, videz le cache de Statamic pour que les modifications prennent effet :

php artisan cache:clear
php please stache:refresh

Puis visitez votre site web dans un nouvel onglet de navigateur ou en fenêtre de navigation privée. 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é à la fois le cache de Laravel et le Stache de Statamic. Si vous utilisez la mise en cache statique, exécutez également php please static:clear. Vérifiez la console de votre navigateur (F12) pour toute erreur JavaScript.

Important : Si vous utilisez le générateur de site statique de Statamic (ssg), assurez-vous de régénérer vos fichiers statiques après avoir ajouté le script du chatbot en exécutant php please ssg:generate.

Documentation