Comment ajouter le chatbot IA Asyntai à Sanity

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

Plateforme :

Important : Sanity est un CMS headless qui fournit du contenu via des API. Le code du chatbot doit être ajouté à votre application frontend (Next.js, Gatsby, Nuxt, HTML simple, etc.), et non au Sanity Studio lui-même.

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

Si votre site Sanity utilise Next.js (la combinaison la plus courante), ajoutez le chatbot à votre mise en page racine :

App Router (Next.js 13+)

Ouvrez app/layout.js (ou 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.js :

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 Gatsby

Si votre site Sanity utilise Gatsby, ajoutez le script via gatsby-ssr.js :

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Note : Vous devez également ajouter le même code à gatsby-browser.js si vous souhaitez que le widget persiste lors de la navigation côté client. Vous pouvez également l'ajouter à votre composant de mise en page racine.

Méthode alternative 2 : Frontend Nuxt.js

Si votre site Sanity utilise Nuxt.js, ajoutez le script dans nuxt.config.js (ou nuxt.config.ts) :

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

Méthode alternative 3 : Frontend HTML simple

Si votre site Sanity utilise du HTML simple ou un générateur de sites statiques consommant l'API Sanity :

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>

Méthode alternative 4 : React (Vite ou Create React App)

Si votre frontend utilise React avec Vite ou Create React App :

Ajoutez le script à index.html dans le répertoire public/ :

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Ou utilisez un hook useEffect dans votre composant racine :

// App.jsx or App.tsx
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
  );
}

É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