Dokumentation

React & Next.js

Fügen Sie das Agenten-Widget zu React- und Next.js-Anwendungen hinzu.

Integrieren Sie das Agenten-Widget mit wenigen Codezeilen in Ihre React- und Next.js-Anwendung.

Installation

Fügen Sie das Widget-Script zu Ihrer React-App hinzu. Holen Sie sich Ihren Einbettungscode über Chatbot > Veröffentlichen und passen Sie ihn dann an Ihr Framework an.

Next.js (App Router)

Fügen Sie das Script mithilfe der Next.js-Komponente Script zu Ihrem Root-Layout hinzu:

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

Fügen Sie es zu _app.tsx oder _document.tsx hinzu:

// 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

Fügen Sie es in public/index.html ein. Kopieren Sie Ihren Einbettungscode aus Chatbot > Veröffentlichen:

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

Vite

Fügen Sie es in index.html ein. Kopieren Sie Ihren Einbettungscode aus Chatbot > Veröffentlichen:

<!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>

Dynamische Agent-ID

Für Multi-Tenant-Apps, bei denen die Agent-ID variiert:

// 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"
    />
  );
}

Bedingtes Laden

Widget nur auf bestimmten Seiten anzeigen:

// 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"
      />
    </>
  );
}

TypeScript-Typen

Das Widget benötigt keine TypeScript-Typen, da es extern geladen wird und seine eigene Oberfläche verwaltet.

Testen während der Entwicklung

Für die lokale Entwicklung:

  1. Fügen Sie localhost zu den zulässigen Domains hinzu
  2. Verwenden Sie Ihre Produktions-Agent-ID
  3. Testen Sie die Interaktionen wie gewohnt

Umgebungsvariablen

Speichern Sie die Agent-ID und die Widget-URL in Umgebungsvariablen:

# .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"
/>

Beide Werte finden Sie im Tab Veröffentlichen Ihres Agenten.

Hinweis zu Server-Komponenten

Die Script-Komponente funktioniert mit React Server Components. Sie müssen das Layout nicht als Client-Komponente kennzeichnen.

Nächste Schritte