Guías de instalación

Instale ChattyBox cargando un script de widget público en las páginas donde los visitantes deberían poder hacer preguntas.

Comience desde el fragmento en su panel ChattyBox. Incluye la clave API del widget público y la URL API para su proyecto:

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

Reemplace YOUR_API_KEY con la clave del widget público de su panel. Si su panel muestra un data-api-url diferente, mantenga el valor del panel exactamente.

Lo que pertenece al guión

Utilice atributos de secuencia de comandos para los valores que deben estar disponibles antes de que se pueda iniciar el widget:

Atributo	Requerido	Úselo para
`src`	si	Cargando el widget ChattyBox JavaScript.
`data-api-key`	si	Identificar la clave del widget público para su proyecto.
`data-api-url`	si	Envío de solicitudes de widget al ChattyBox API.
`data-locale`	No	Forzar el idioma de la interfaz de usuario del widget en una página específica.

Utilice la configuración del panel para todo lo que debe administrarse sin volver a implementar su sitio:

Colores, posición, icono, título y mensaje de bienvenida del widget.
Modo de idioma predeterminado y si se permiten anulaciones data-locale.
Creación, eliminación de claves públicas y cualquier restricción de origen permitido configurada para su proyecto.
Scraping, re-scraping, chat de prueba, análisis y lagunas de contenido.

Normal HTML

Pegue el fragmento una vez cerca del final de body, justo antes de </body>. Esto funciona para HTML estáticos, sitios codificados a mano y plantillas que exponen un pie de página 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 Shell de la aplicación

Para un sitio Next.js App Router, agregue el widget a app/layout.tsx con next/script para que se cargue una vez para toda la aplicación.

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

Para una aplicación de una sola página React, agregue el script una vez en el shell de su aplicación de nivel superior o en la plantilla HTML. No lo inyecte desde todos los componentes de la ruta.

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

Para Docusaurus, cree o actualice src/theme/Root.tsx para que el widget esté disponible en todas las páginas de documentos.

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 su sitio Docusaurus tiene rutas traducidas, configure data-locale desde el idioma de la página actual o confíe en el valor <html lang> de la página.

Genérico CMS/Personalizado HTML

La mayoría de las plataformas CMS tienen un área de plantilla de tema, pie de página o código personalizado global. Agregue el script allí para que cada página pública pueda cargar el widget.

Usa esta ruta para Webflow, Framer, Squarespace, áreas de código personalizado de Wix, temas de Shopify, plantillas de HubSpot y plataformas CMS personalizadas que te permiten editar HTML globales.

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

Antes de publicar, confirme que CMS no elimina data-api-key, data-api-url o async de los scripts personalizados.

Google Tag Manager

Utilice Google Tag Manager cuando su equipo ya administre scripts de terceros a través de GTM.

Abra su contenedor GTM.
Cree una nueva etiqueta Personalizada HTML.
Pegue el fragmento ChattyBox.
Utilice un activador Todas las páginas o un activador más limitado solo para las páginas que deberían mostrar el widget.
Obtenga una vista previa del contenedor, verifique las cargas del widget y luego publíquelo.

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

Si su sitio utiliza el modo de consentimiento o una política de consentimiento de etiquetas, asegúrese de que el widget pueda cargarse en las páginas donde los visitantes necesitan ayuda.

WordPress

ChattyBox no requiere un complemento WordPress. Utilice una de las ubicaciones de script que su configuración WordPress ya admite:

Configuraciones de tema que proporcionan scripts de encabezado o pie de página.
Un tema secundario que controla la plantilla del pie de página.
Un complemento de secuencia de comandos de encabezado/pie de página.
Google Tag Manager si su sitio WordPress ya lo utiliza.

Pegue el fragmento en una ubicación de pie de página global para que aparezca en las páginas publicadas, publicaciones, documentos y artículos de la base de conocimientos donde el chatbot debería estar disponible.

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

Evite agregar el widget a wp-admin, páginas de pago, cuenta o membresía privada a menos que esas páginas sean intencionalmente públicas y admitidas.

Verificación

Después de la instalación, ejecute la lista de verificación de inicio antes de anunciar el chatbot:

Abra una página pública en una ventana de incógnito.
Confirme que aparezca el iniciador de widgets.
Abra el widget y haga una pregunta real a un cliente.
Verifique que la respuesta incluya citas de fuentes.
Verifique en la consola del navegador si falta data-api-key, falta data-api-url o errores de clave/origen.

Lo que pertenece al guión​

Normal HTML​

Next.js / React Shell de la aplicación​

Docusaurus​

Genérico CMS/Personalizado HTML​

Google Tag Manager​

WordPress​

Verificación​