Guides d'installation

Installez ChattyBox en chargeant un script de widget public sur les pages où les visiteurs devraient pouvoir poser des questions.

Commencez par l'extrait de votre tableau de bord ChattyBox. Il comprend la clé API du widget public et l'URL API de votre projet :

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Remplacez YOUR_API_KEY par la clé publique du widget de votre tableau de bord. Si votre tableau de bord affiche un data-api-url différent, conservez exactement la valeur du tableau de bord.

Ce qui appartient au script

Utilisez les attributs de script pour les valeurs qui doivent être disponibles avant que le widget puisse démarrer :

Attribut	Obligatoire	Utilisez-le pour
`src`	Oui	Chargement du widget JavaScript ChattyBox.
`data-api-key`	Oui	Identification de la clé publique du widget pour votre projet.
`data-api-url`	Oui	Envoi de requêtes de widget au ChattyBox API.
`data-locale`	Non	Forcer la langue de l'interface utilisateur du widget sur une page spécifique.

Utilisez les paramètres du tableau de bord pour tout ce qui doit être géré sans redéployer votre site :

Couleurs, position, icône, titre et message de bienvenue du widget.
Mode de langue par défaut et si les remplacements data-locale sont autorisés.
Création, suppression de clé publique et toutes restrictions d'origine autorisées configurées pour votre projet.
Scraping, re-scraping, test de chat, analyses et lacunes de contenu.

Plaine HTML

Collez l'extrait une fois vers la fin de body, juste avant </body>. Cela fonctionne pour les HTML statiques, les sites codés à la main et les modèles qui exposent un pied de page global.

<!doctype html>
<html lang="en">
  <head>
    <title>Example Site</title>
  </head>
  <body>
    <main>
      <!-- Page content -->
    </main>

    <script
      src="https://chattybox.ai/widget.js"
      data-api-key="YOUR_API_KEY"
      data-api-url="https://app.chattybox.ai"
      async
    ></script>
  </body>
</html>

Next.js / React Coque d'application

Pour un site Next.js App Router, ajoutez le widget à app/layout.tsx avec next/script afin qu'il se charge une fois pour l'ensemble de l'application.

import Script from "next/script";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://chattybox.ai/widget.js"
          data-api-key="YOUR_API_KEY"
          data-api-url="https://app.chattybox.ai"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pour une application monopage React, ajoutez le script une fois dans le shell de votre application de niveau supérieur ou dans le modèle HTML. Ne l’injectez pas à partir de chaque composant de route.

import { useEffect } from "react";

export function ChattyBoxWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-chattybox-widget]")) return;

    const script = document.createElement("script");
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "https://app.chattybox.ai");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

Docusaurus

Pour Docusaurus, créez ou mettez à jour src/theme/Root.tsx afin que le widget soit disponible sur toutes les pages de documentation.

import React, { useEffect } from "react";

export default function Root({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (document.querySelector("script[data-chattybox-widget]")) return;

    const script = document.createElement("script");
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "https://app.chattybox.ai");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return <>{children}</>;
}

Si votre site Docusaurus propose des itinéraires traduits, définissez data-locale à partir de la langue actuelle de la page ou comptez sur la valeur <html lang> de la page.

Générique CMS/Personnalisé HTML

La plupart des plates-formes CMS disposent d'une zone de code personnalisé global, de pied de page ou de modèle de thème. Ajoutez-y le script pour que chaque page publique puisse charger le widget.

Utilisez ce chemin pour Webflow, Framer, Squarespace, les zones de code personnalisées Wix, les thèmes Shopify, les modèles HubSpot et les plates-formes CMS personnalisées qui vous permettent de modifier HTML global.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Avant la publication, vérifiez que CMS ne supprime pas data-api-key, data-api-url ou async des scripts personnalisés.

Google Tag Manager

Utilisez Google Tag Manager lorsque votre équipe gère déjà des scripts tiers via GTM.

Ouvrez votre conteneur GTM.
Créez une nouvelle balise Custom HTML.
Collez l'extrait ChattyBox.
Utilisez un déclencheur Toutes les pages ou un déclencheur plus étroit pour uniquement les pages qui doivent afficher le widget.
Prévisualisez le conteneur, vérifiez le chargement du widget, puis publiez.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Si votre site utilise le mode consentement ou une politique de consentement par balise, assurez-vous que le widget est autorisé à se charger sur les pages où les visiteurs ont besoin d'aide.

WordPress

ChattyBox ne nécessite pas de plugin WordPress. Utilisez l'un des emplacements de script que votre configuration WordPress prend déjà en charge :

Paramètres de thème qui fournissent des scripts d’en-tête ou de pied de page.
Un thème enfant qui contrôle le modèle de pied de page.
Un plugin de script d'en-tête/pied de page.
Google Tag Manager si votre site WordPress l'utilise déjà.

Collez l'extrait dans un emplacement de pied de page global afin qu'il apparaisse sur les pages publiées, les publications, les documents et les articles de la base de connaissances où le chatbot devrait être disponible.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Évitez d'ajouter le widget aux pages wp-admin, de paiement, de compte ou d'adhésion privée, à moins que ces pages ne soient intentionnellement publiques et prises en charge.

Vérification

Après l'installation, exécutez la launch checklist avant d'annoncer le chatbot :

Ouvrez une page publique dans une fenêtre de navigation privée.
Confirmez que le lanceur de widgets apparaît.
Ouvrez le widget et posez une vraie question client.
Vérifiez que la réponse inclut des citations de sources.
Vérifiez dans la console du navigateur data-api-key manquant, data-api-url manquant ou des erreurs de clé/origine.

Ce qui appartient au script​

Plaine HTML​

Next.js / React Coque d'application​

Docusaurus​

Générique CMS/Personnalisé HTML​

Google Tag Manager​

WordPress​

Vérification​