Comment ajouter le chatbot IA Asyntai à PayloadCMS

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

Plateforme :

Important : PayloadCMS est un CMS headless. Le code du chatbot doit être ajouté à votre application frontend, et non au panneau d'administration Payload.

É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 frontend Next.js (le plus courant)

PayloadCMS utilise généralement Next.js comme framework frontend. Ajoutez le chatbot à votre mise en page racine :

App Router (Next.js 13+)

Ouvrez app/layout.tsx et ajoutez le composant Script :

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Si vous utilisez le Pages Router, ouvrez pages/_app.tsx :

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Astuce : L'option strategy="afterInteractive" garantit que le chatbot se charge après que la page soit devenue interactive, offrant la meilleure expérience utilisateur sans affecter les performances de chargement de la page.

Méthode alternative 1 : Frontend React personnalisé

Si votre projet PayloadCMS utilise un frontend React personnalisé au lieu de Next.js, vous pouvez charger le chatbot dynamiquement avec un hook useEffect :

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const 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);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Note : Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel depuis le tableau de bord. La fonction de nettoyage dans l'instruction return garantit que le script est supprimé si le composant est démonté.

Méthode alternative 2 : Utilisation des composants personnalisés de Payload (panneau d'administration uniquement)

Si vous souhaitez que le chatbot apparaisse dans le panneau d'administration Payload lui-même (pour le support interne), vous pouvez enregistrer un composant personnalisé dans votre payload.config.ts :

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Puis créez le fichier du composant :

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  useEffect(() => {
    const 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);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
};

export default AsyntaiChatbot;

Astuce : Cette méthode est uniquement destinée à l'ajout du chatbot au panneau d'administration Payload. Pour votre site web public, utilisez plutôt l'étape 2 ou la méthode alternative 1.

Méthode alternative 3 : HTML simple / Site statique

Si votre site PayloadCMS utilise un frontend HTML simple ou statique consommant l'API Payload, ajoutez le code d'intégration directement dans votre HTML :

Ouvrez votre fichier HTML principal (généralement index.html)
Ajoutez le code d'intégration juste avant la balise fermante </body> :

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

Étape 3 : Déployer et vérifier

Après avoir ajouté le code à votre application frontend :

Déployez votre frontend chez votre hébergeur (Vercel, Netlify, etc.)
Ouvrez votre site en ligne dans un nouvel onglet du navigateur
Vous devriez voir le bouton du widget de chat dans le coin inférieur droit de votre page
Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement

Vous ne voyez pas le widget ? Assurez-vous d'avoir remplacé YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord. Vérifiez que le script se charge dans l'onglet Réseau de votre navigateur (F12 > Network). Vérifiez que le frontend a été redéployé après l'ajout du code. Pour Next.js, assurez-vous d'utiliser le composant Script de next/script, et non une balise <script> classique. Videz le cache de votre navigateur ou testez en mode navigation privée.

Documentation