Inserción del widget

Agregue su chatbot de IA a cualquier sitio web en segundos con nuestro sencillo código de inserción.

Inicio rápido

Añada este código antes de la etiqueta de cierre </body>:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

¡Listo! Su chatbot ya está activo en su sitio web.

Cómo encontrar el ID de su chatbot

1. Vaya a la configuración de su chatbot
2. Navegue a la pestaña Embed
3. Copie el código de embed (incluye su ID)

O encuentre el ID en la URL de su dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Opciones del widget

Personalice el widget con data attributes:

Opciones básicas

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-language="en"
  async
></script>

Color Overrides

Sobrescriba la configuración del dashboard con colores en línea:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Muestre las FAQs como un acordeón en cualquier página:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

El widget de FAQ muestra las FAQs publicadas de su chatbot.

Opciones del widget de FAQ

Ejemplo de filtro de categoría

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Optimización móvil

El widget de chat está totalmente optimizado para dispositivos móviles:

• Diseño a ancho completo en pantallas pequeñas
• Animación deslizante al abrir
• Manejo del teclado iOS (el widget se ajusta al teclado en pantalla)
• Soporte de área segura para el notch y el indicador de inicio del iPhone
• Objetivos táctiles más grandes para mejor usabilidad
• El tamaño de fuente de entrada previene el auto-zoom de iOS

Guías específicas por plataforma

WordPress

Recomendado: Use el Plugin oficial de WordPress de ChatReact para la integración más sencilla con bloques Gutenberg, widgets de Elementor y shortcodes.

Alternativa: Inserción manual mediante un plugin "Header/Footer Scripts":

1. Instale cualquier plugin "Header/Footer Scripts"
2. Agregue el embed code a la footer section
3. Guarde y publique

Shopify

Recomendado: Aplicación ChatReact para Shopify

Instale la aplicación ChatReact desde la Shopify App Store para la integración más sencilla:

1. Instale la aplicación ChatReact en su admin de Shopify
2. Introduzca su Chatbot ID en los ajustes de la aplicación
3. El widget de chat aparece automáticamente en su tienda
4. Gestione las asignaciones de widgets por página o actívelo en todas partes

La aplicación también soporta widgets de Formulario y FAQ como App Blocks en el Theme Editor.

Alternativa: Inserción manual

1. Go to Online Store → Themes → Edit Code
2. Open theme.liquid
3. Add code before </body>
4. Save

Webflow

1. Vaya a Project Settings → Custom Code
2. Añada al Footer Code
3. Publique el sitio

Next.js / React

Use the Script component:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Agregue a su App.vue principal o al layout:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Interactúe con el widget de forma programática:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Pruebas

Modo de vista previa

Antes de incrustarlo en vivo:

1. Use la función Preview en su panel
2. Pruebe diferentes escenarios
3. Verifique que las respuestas sean precisas

Desarrollo local

Para pruebas locales, use URLs localhost:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Troubleshooting

Widget no aparece

1. Compruebe la consola del navegador en busca de errores
2. Verifique que el ID del chatbot sea correcto
3. Asegúrese de que el chatbot esté activo (no deshabilitado)
4. Compruebe si los bloqueadores de anuncios interfieren

Conflictos de estilo

Si el CSS de su sitio genera conflictos:

• El widget usa shadow DOM para aislamiento
• Compruebe los valores de z-index
• Asegúrese de que no haya sobrescrituras con !important

Rendimiento

El widget está diseñado para un impacto mínimo:

• Lazy loaded
• < 50KB de tamaño total
• Non-blocking
• Almacenado en caché de forma agresiva

Next Steps

• Plugin de WordPress →
• Integración Shopify →
• Gestión de FAQ →