Comment ajouter le chatbot IA Asyntai à Strapi

Guide étape par étape pour les sites propulsés par Strapi

Plateforme :

CMS Headless : Strapi est un CMS headless qui fournit du contenu via une API mais n'inclut pas de frontend intégré. L'installation du chatbot dépend du framework frontend que vous utilisez pour afficher votre contenu Strapi. Choisissez la méthode ci-dessous qui correspond à votre configuration.

É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.

Méthode 1 : Next.js avec Strapi (recommandée)

Si vous utilisez Next.js comme frontend Strapi (la configuration la plus courante), ajoutez le chatbot en utilisant le composant Script :

Ouvrez votre fichier de mise en page principal : app/layout.tsx (App Router) ou pages/_app.tsx (Pages Router)
Importez le composant Script et ajoutez le chatbot :
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Enregistrez le fichier et redémarrez votre serveur de développement

Astuce : L'utilisation de strategy="lazyOnload" garantit que le chatbot se charge après que la page soit entièrement interactive, offrant les meilleures performances pour votre site alimenté par Strapi.

Méthode 2 : Gatsby avec Strapi

Pour les sites Gatsby utilisant gatsby-source-strapi :

Create or edit gatsby-ssr.js in your project root:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Redémarrez votre serveur de développement Gatsby

Méthode 3 : Nuxt.js avec Strapi

Pour les applications Nuxt.js utilisant @nuxtjs/strapi :

Nuxt 3 :

Ajoutez à votre nuxt.config.ts :
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2 :

Ajoutez à votre nuxt.config.js :
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Méthode 4 : React avec Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Ouvrez votre fichier public/index.html (CRA) ou index.html (Vite)
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Enregistrez le fichier

Ou créez un composant React :

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Méthode 5 : SvelteKit avec Strapi

Pour les applications SvelteKit consommant du contenu Strapi :

Modifiez votre fichier src/app.html
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Enregistrez le fichier

Méthode 6 : site statique avec l'API Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

Ajoutez le code d'intégration à votre fichier HTML avant la balise fermante </body> :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Enregistrez le fichier et téléversez-le sur votre hébergement

Étape 2 : Vérifier l'installation

Après avoir ajouté le code du chatbot à votre site propulsé par Strapi, déployez ou lancez votre serveur de développement. Visitez votre site web dans un nouvel onglet de navigateur ou en navigation privée. 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 ? Assurez-vous d'avoir ajouté le script dans le bon fichier pour votre framework. Vérifiez la console de développement de votre navigateur pour toute erreur. Si vous utilisez le rendu côté serveur, assurez-vous que le script s'exécute côté client. Essayez de vider le cache de votre navigateur ou de consulter le site dans une fenêtre de navigation privée.

Variables d'environnement : Pour une meilleure sécurité et flexibilité, envisagez de stocker votre identifiant de widget dans une variable d'environnement (par exemple, NEXT_PUBLIC_ASYNTAI_ID pour Next.js ou VITE_ASYNTAI_ID pour Vite) plutôt que de le coder en dur.

Documentation