Comment ajouter le chatbot IA Asyntai à Contentful

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

Plateforme :

CMS Headless : Contentful est un CMS headless, ce qui signifie qu'il fournit du contenu via une API mais ne dispose pas d'un frontend intégré. L'installation du chatbot dépend du framework frontend que vous utilisez pour afficher votre contenu Contentful. Choisissez ci-dessous la méthode correspondant à 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 Contentful (recommandée)

Si vous utilisez Next.js pour afficher votre contenu Contentful, 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="afterInteractive" garantit que le chatbot se charge juste après que la page soit devenue interactive, offrant un bon équilibre entre performance et disponibilité.

Méthode 2 : Gatsby avec Contentful

Pour les sites Gatsby utilisant du contenu provenant de Contentful :

Installez gatsby-plugin-load-script (optionnel mais recommandé) :
npm install gatsby-plugin-load-script
Ajoutez à votre gatsby-config.js :
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Sinon, utilisez gatsby-ssr.js :
// gatsby-ssr.js 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" /> ]) }
Redémarrez votre serveur de développement Gatsby

Méthode 3 : React avec Contentful

Pour les applications React standard (Create React App, Vite, etc.) utilisant Contentful :

Ouvrez votre fichier public/index.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

Ou utilisez un composant React avec useEffect :

// 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 4 : Vue/Nuxt avec Contentful

Pour les applications Vue ou Nuxt.js utilisant Contentful :

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' } ] } } })

Vue 3 :

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Méthode 5 : HTML statique avec l'API Contentful

Si vous utilisez l'API Content Delivery de Contentful avec du JavaScript natif :

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 Contentful, 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) plutôt que de le coder en dur.

Documentation