Documentation

React & Next.js

Ajoutez le widget de l’agent aux applications React et Next.js.

Intégrez le widget de l’agent dans vos applications React et Next.js en quelques lignes de code.

Installation

Ajoutez le script du widget à votre application React. Récupérez votre code d’intégration depuis Chatbot > Publier, puis adaptez-le à votre framework.

Next.js (App Router)

Ajoutez le script à votre layout racine à l’aide du composant Script de Next.js :

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Get your src and data-chatbot values from Chatbot > Publish */}
        <Script
          src="YOUR_WIDGET_URL"
          data-chatbot="YOUR_CHATBOT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Next.js (Pages Router)

Ajoutez-le à _app.tsx ou _document.tsx :

// pages/_app.tsx
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      {/* Get your src and data-chatbot values from Chatbot > Publish */}
      <Script
        src="YOUR_WIDGET_URL"
        data-chatbot="YOUR_CHATBOT_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Create React App

Ajoutez-le à public/index.html. Copiez votre code d’intégration depuis Chatbot > Publier :

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... -->
</head>
<body>
  <div id="root"></div>
  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Vite

Ajoutez-le à index.html. Copiez votre code d’intégration depuis Chatbot > Publier :

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... -->
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

ID d’agent dynamique

Pour les applications multi-tenant où l’ID de l’agent varie :

// components/ChatbotWidget.tsx
'use client';

import Script from 'next/script';

interface ChatbotWidgetProps {
  chatbotId: string;
  widgetUrl: string;
}

export function ChatbotWidget({ chatbotId, widgetUrl }: ChatbotWidgetProps) {
  if (!chatbotId) return null;

  return (
    <Script
      src={widgetUrl}
      data-chatbot={chatbotId}
      strategy="afterInteractive"
    />
  );
}

Chargement conditionnel

Afficher le widget uniquement sur certaines pages :

// app/support/layout.tsx
import Script from 'next/script';

export default function SupportLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {children}
      {/* Get your src and data-chatbot values from Chatbot > Publish */}
      <Script
        src="YOUR_WIDGET_URL"
        data-chatbot="YOUR_CHATBOT_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Types TypeScript

Le widget ne nécessite pas de types TypeScript, car il est chargé en externe et gère sa propre interface.

Tests en développement

Pour le développement local :

  1. Ajoutez localhost aux domaines autorisés
  2. Utilisez l’ID de votre agent de production
  3. Testez les interactions normalement

Variables d’environnement

Stockez l’ID de l’agent et l’URL du widget dans des variables d’environnement :

# .env.local
NEXT_PUBLIC_CHATBOT_ID=your-chatbot-id
NEXT_PUBLIC_WIDGET_URL=your-widget-url

<Script
  src={process.env.NEXT_PUBLIC_WIDGET_URL}
  data-chatbot={process.env.NEXT_PUBLIC_CHATBOT_ID}
  strategy="afterInteractive"
/>

Récupérez les deux valeurs depuis l’onglet Publier de votre agent.

Remarque sur les composants serveur

Le composant Script fonctionne avec les React Server Components. Inutile de marquer le layout comme composant client.

Étapes suivantes