Comment ajouter le chatbot IA Asyntai à MedusaCMS

Guide étape par étape pour les vitrines propulsées par Medusa

Plateforme :

Important : Medusa est une plateforme e-commerce headless. Le code du chatbot doit être ajouté à votre application vitrine, et non au serveur/administration Medusa.

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

Le starter de vitrine par défaut de Medusa utilise Next.js. Ajoutez le chatbot à la mise en page racine de votre vitrine :

App Router (Next.js 13+)

Ouvrez app/layout.tsx dans votre projet de vitrine 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 votre vitrine utilise le Pages Router, ouvrez pages/_document.tsx ou pages/_app.tsx :

// 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 : Vitrine Gatsby

Si votre vitrine Medusa utilise Gatsby, ajoutez le script via gatsby-ssr.js en utilisant onRenderBody et setPostBodyComponents :

// 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 devriez é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 : Vitrine React personnalisée

Si votre vitrine Medusa utilise une configuration React personnalisée (Vite, Create React App, etc.) :

Ajoutez le script à public/index.html juste avant la balise fermante </body> :

<!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.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
  );
}

Méthode alternative 3 : Tout frontend personnalisé

Si votre boutique Medusa utilise tout autre frontend basé sur HTML, ajoutez simplement la balise script standard 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>

Astuce : Cette méthode fonctionne avec tout framework frontend ou générateur de sites statiques qui produit du HTML, y compris Vue, Svelte, Angular, Astro et d'autres connectés au backend Medusa.

Étape 3 : Déployer et vérifier

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

Déployez votre storefront chez votre hébergeur (Vercel, Netlify, Railway, etc.)
Ouvrez votre vitrine 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 la vitrine a été redéployée 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. N'oubliez pas que le code doit être ajouté dans la vitrine, pas dans le serveur Medusa. Videz le cache de votre navigateur ou testez en mode navigation privée.

Documentation