Retour au tableau de bord

Documentation

Apprenez à utiliser Asyntai

Premiers pas
Installation Base de connaissances Tester votre IA Gérer les sites web
Personnalisation
Couleurs du widget Nom de l'assistant IA Message initial Position du widget Déclenchement automatique Bulle de salutation Badge de messages non lus Mode instruction Poser des questions Utiliser les émojis Collecter les e-mails Collecter les numéros de téléphone Capture intelligente de prospects Localisation Masquer la marque Lien de confidentialité Avis personnalisé Téléchargement de la transcription Nouvelle conversation Historique des conversations Slogan et point de statut Reconnaissance vocale Icône de chat Logo de l'entreprise Limite de caractères Température
Conseils pour les instructions IA Comparer les forfaits
Fonctionnalités
Exploration du site web Lacunes de connaissances Fiches produits Fiches produit dynamiques Dynamic Images Contexte utilisateur Surveillance en direct Prise en charge humaine Escalade Notifications IA Rapport quotidien Flux de données en temps réel Flux de données en temps réel Max Membres de l’équipe Authentification unique Inclure des images Vision par image Widget de traduction Localisation Prospects Capture intelligente de prospects Tickets de support Réservations Intégrations Exclure des pages IPs bloquées Modèle plus intelligent Activer la réflexion Suggestions de réponse Messages de suivi Reconnaissance vocale Téléchargement de la transcription Chat intégré
Analyses
Analytique du chat Journaux de chat
Intégrations
API REST Instagram Messenger WhatsApp Zapier Email Applications mobiles
Autre
Ajouter à l’écran d’accueil Bouton d’ouverture personnalisé
Demander à l'IA

Comment ajouter le chatbot IA Asyntai à DatoCMS

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

Obtenir le code d'intégration
Plateforme :
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

CMS Headless : DatoCMS est un CMS headless qui diffuse du contenu via des API. Le code du chatbot doit être ajouté à votre application frontend (Next.js, Gatsby, Nuxt, etc.), et non au tableau de bord DatoCMS.

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

Next.js est le framework frontend le plus populaire utilisé avec DatoCMS. Ajoutez le chatbot en utilisant le composant Script :

App Router (app/layout.tsx) :

  1. Ouvrez votre fichier de mise en page racine : app/layout.tsx
  2. 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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
  4. Enregistrez le fichier et redémarrez votre serveur de développement

Pages Router (pages/_app.tsx) :

  1. Ouvrez votre fichier pages/_app.tsx
  2. Ajoutez le composant Script :
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

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

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 alternative 1 : Frontend Gatsby

Pour les sites Gatsby utilisant du contenu provenant de DatoCMS via gatsby-source-datocms :

  1. Créez ou modifiez gatsby-ssr.js à la racine de votre projet :
    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"
        />
      ])
    }
  2. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
  3. Redémarrez votre serveur de développement Gatsby

Méthode alternative 2 : Frontend Nuxt.js

Pour les applications Nuxt.js consommant du contenu DatoCMS :

  1. 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'
            }
          ]
        }
      }
    })
  2. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
  3. Redémarrez votre serveur de développement Nuxt

Méthode alternative 3 : HTML simple / Site statique

Si vous utilisez l'API Content Delivery de DatoCMS avec un site HTML statique ou un générateur de sites statiques :

  1. 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>
  2. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
  3. Enregistrez le fichier et téléversez-le sur votre hébergement

Méthode alternative 4 : React (Vite/CRA)

Pour les applications React standard (Create React App, Vite) utilisant l'API DatoCMS :

Option A : Ajouter à public/index.html

  1. Ouvrez votre fichier public/index.html (CRA) ou index.html (Vite)
  2. Ajoutez le code d'intégration avant la balise de fermeture </body> :
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Enregistrez le fichier

Option B : useEffect dans le composant racine

  1. Créez un composant chatbot ou ajoutez-le à votre composant racine :
    // 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
    }
  2. Importez et affichez le composant dans votre App.jsx ou mise en page racine

Étape 3 : Déployer et vérifier

Après avoir ajouté le code du chatbot à votre site propulsé par DatoCMS, 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.