Documentación

React & Next.js

Agrega el widget del agente a aplicaciones de React y Next.js.

Integra el widget del agente en aplicaciones de React y Next.js con unas pocas líneas de código.

Instalación

Agrega el script del widget a tu app de React. Obtén tu código de incrustación desde Chatbot > Publicar y luego adáptalo a tu framework.

Next.js (App Router)

Agrega el script a tu layout raíz usando el componente 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)

Agrégalo a _app.tsx o _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

Agrégalo a public/index.html. Copia tu código de incrustación desde Chatbot > Publicar:

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

Vite

Agrégalo a index.html. Copia tu código de incrustación desde Chatbot > Publicar:

<!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 de agente dinámico

Para apps multiusuario donde el ID de agente varía:

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

Carga condicional

Muestra el widget solo en ciertas páginas:

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

Tipos de TypeScript

El widget no requiere tipos de TypeScript, ya que se carga externamente y administra su propia interfaz.

Pruebas durante el desarrollo

Para el desarrollo local:

  1. Agrega localhost a los dominios permitidos
  2. Usa el ID de tu agente de producción
  3. Prueba las interacciones con normalidad

Variables de entorno

Guarda el ID del agente y la URL del widget en variables de entorno:

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

Obtén ambos valores desde la pestaña Publicar de tu agente.

Nota sobre los Server Components

El componente Script funciona con los React Server Components. No hace falta marcar el layout como componente de cliente.

Próximos pasos