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

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

¡Eso es todo! 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 inserción (incluye su ID)

Personalización del Widget

La apariencia y el comportamiento del widget se configuran en su panel — no en el código de inserción. Vaya a Dashboard → Chatbots → [your chatbot] → Widget para ajustar:

• Posición — abajo a la derecha, abajo a la izquierda, o inline
• Colores — colores primario, de fondo y de texto, además del radio del borde
• Tamaño — ancho y alto del widget

Para abrir el chat automáticamente después de un retraso configurable, active Auto-Open en la pestaña Behavior de la misma página de ajustes.

Los cambios se aplican automáticamente a su sitio web — no es necesario actualizar el código de inserción. Consulte la guía Widget Customization para ver todas las opciones disponibles.

El idioma del widget se detecta automáticamente desde el navegador de cada visitante, en función de los idiomas que habilite en la pestaña Languages de su chatbot.

Widget de FAQ

Muestre las preguntas frecuentes 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"
  async
></script>

El widget de FAQ muestra las FAQs publicadas de su chatbot. Los colores y el estilo (primario, fondo y colores de texto, radio del borde) se configuran en Dashboard → FAQs → Settings.

Opciones del Widget de FAQ

Ejemplo de Filtro por 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 de ancho completo en pantallas pequeñas
• Animación de deslizamiento al abrirse
• Manejo del teclado en iOS (el widget se ajusta al teclado en pantalla)
• Soporte de safe-area para el notch y el indicador de inicio del iPhone
• Objetivos táctiles más grandes para mejor usabilidad
• Tamaño de fuente de entrada que evita el auto-zoom en iOS

Guías por Plataforma

WordPress

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

Alternativa: Inserción manual vía un plugin de "Header/Footer Scripts":

1. Instale cualquier plugin de "Header/Footer Scripts"
2. Añada el código de inserción en la sección de footer
3. Guarde y publique

Shopify

Recomendado: ChatReact Shopify App

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

1. Instale la app ChatReact en su panel de administración de Shopify
2. Ingrese su Chatbot ID en la configuración de la app
3. El widget de chat aparece automáticamente en su tienda
4. Gestione las asignaciones del widget por página, o actívelo en todas partes

La app también soporta widgets de Form y FAQ como App Blocks en el Theme Editor.

Alternativa: Inserción Manual

1. Vaya a Online Store → Themes → Edit Code
2. Abra theme.liquid
3. Añada el código antes de </body>
4. Guarde

Webflow

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

Next.js / React

Use el componente Script:

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>

API de JavaScript

Interactúe con el widget programáticamente:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Pruebas

Modo de Vista Previa

Antes de insertar en producción:

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

Resolución de Problemas

El Widget No Aparece

1. Revise 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 están interfiriendo
5. Verifique el uso de su plan — el widget se pausa cuando se alcanza el límite mensual de su plan

Plugins de Caché y Optimización

Algunos plugins de caché u optimización de scripts reescriben las URLs de los scripts, lo que puede impedir que el widget se cargue. Si eso ocurre, agregue una URL de API explícita al tag script:

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

El mismo atributo funciona en los scripts de los widgets de FAQ y de formulario.

Conflictos de Estilo

Si el CSS de su sitio entra en conflicto:

• El widget aplica sus estilos a su propio contenedor y utiliza reglas de alta prioridad para resistir conflictos
• Revise los valores de z-index de los elementos que se superponen al widget
• Evite reglas !important demasiado genéricas en el CSS de su sitio que apunten a elementos comunes

Rendimiento

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

• Se carga de forma asíncrona — nunca bloquea la renderización de la página
• Ligero: aproximadamente 30 KB en transferencia comprimida

Próximos Pasos

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — inserte formularios independientes con el widget de formulario