TutorialGetting StartedAI

Cómo configurar tu primer widget de chat con IA en menos de 5 minutos

Una guía paso a paso para agregar un widget de chat con IA a tu sitio web. Desde el registro hasta las conversaciones en vivo en menos de cinco minutos.

Por FormalChat Team4 min de lectura

Agregar un chat en vivo a tu sitio web no debería requerir un equipo de ingeniería, un proyecto de integración de una semana ni una guía de configuración de 30 páginas. Con las herramientas modernas de chat con IA, puedes pasar de cero a un widget de chat completamente funcional en menos de cinco minutos.

Aquí te explicamos exactamente cómo hacerlo con FormalChat, paso a paso.

Paso 1: Crea tu cuenta (1 minuto)

Dirígete al panel de operadores de FormalChat y regístrate con el nombre de tu empresa, tu correo electrónico y una contraseña. Eso es todo: no se requiere tarjeta de crédito. El plan gratuito Starter te ofrece 50 mensajes de IA al mes, que es más que suficiente para comenzar y ver cómo funciona con visitantes reales.

Tras registrarte, accederás al panel de operadores. Este es tu centro de mando para gestionar conversaciones, configurar tu IA y personalizar tu widget.

Paso 2: Añade tu base de conocimientos (2 minutos)

La IA es tan buena como la información que le proporcionas. Ve a la sección Base de conocimientos en la configuración de administrador y agrega algunas entradas sobre tu negocio:

  • Datos básicos del negocio: Qué haces, tus horarios, tu ubicación, información de contacto
  • Preguntas frecuentes: Precios, políticas de envío, políticas de devolución, detalles de productos
  • Diferenciadores clave: Qué hace único a tu negocio

No necesitas escribir una novela. Incluso 3-5 entradas bien redactadas en la base de conocimientos mejoran drásticamente la capacidad de la IA para ayudar a tus visitantes. La IA utiliza estas entradas para dar respuestas precisas y fundamentadas en lugar de inventar información.

Empieza con poco y añade más con el tiempo a medida que veas qué preguntan los clientes.

Paso 3: Personaliza tu widget (30 segundos)

En la configuración de administrador, configura la apariencia de tu widget para que coincida con tu marca:

  • Color principal: Configúralo para que coincida con tu paleta de marca
  • Tema: Elige claro, oscuro o detección automática (se adapta al tema del sitio del visitante)
  • Mensaje de bienvenida: Escribe un saludo amigable que aparezca cuando los visitantes abran el chat
  • Horario comercial: Establece cuándo está disponible tu equipo para el traspaso en vivo

El widget se adapta automáticamente al idioma y dispositivo del visitante. Se ve genial en escritorio y móvil sin ninguna configuración adicional.

Paso 4: Incrusta el widget (30 segundos)

Esta es la parte que sorprende a la gente. Todo el proceso de integración es una sola línea de código. Copia la etiqueta de script desde tu panel y pégala en el HTML de tu sitio web, justo antes de la etiqueta de cierre </body>:

<script src="https://formalchat.ai/widget.js"
  data-tenant="your-tenant-id"></script>

Eso es todo. Una sola línea. Funciona con cualquier tecnología de sitio web:

  • WordPress: Pégala en el pie de página de tu tema o usa un plugin de encabezado/pie de página
  • Shopify: Agrégala a tu archivo theme.liquid
  • React / Next.js: Agrégala a tu layout raíz o index.html
  • HTML estático: Pégala directamente en tu archivo HTML
  • Cualquier constructor de sitios web: Usa la función de código personalizado o incrustado

El widget se carga de forma asíncrona, por lo que no ralentizará tu página. Es ligero, menos de 30 KB, y no afecta las métricas de rendimiento de tu sitio.

Paso 5: Pruébalo (1 minuto)

Abre tu sitio web y verás la burbuja de chat en la esquina inferior. Haz clic en ella e intenta hacer una pregunta. La IA responderá usando la base de conocimientos que acabas de configurar.

Prueba algunos escenarios:

  • Haz una pregunta que cubra tu base de conocimientos: la IA debería responder con precisión
  • Pregunta algo que no pueda responder: debería ofrecerte conectarte con un operador humano
  • Solicita hablar con una persona: la conversación debería transferirse a tu panel de operadores

De vuelta en el panel de operadores, verás la conversación aparecer en tiempo real. Puedes reclamarla, responder y ver el historial completo de la conversación con la IA.

¿Qué viene después?

Una vez que el widget esté en vivo, comenzarás a ver fluir las conversaciones de visitantes reales. La IA gestiona automáticamente las preguntas rutinarias. Cuando algo requiere atención humana, recibirás una notificación push en tu teléfono o escritorio.

Durante los próximos días, revisa las conversaciones en tu panel. Identificarás rápidamente patrones: preguntas comunes que la IA maneja bien y temas donde deberías agregar más entradas a la base de conocimientos.

A medida que crezca tu volumen, puedes:

  • Agregar más operadores a tu equipo
  • Configurar respuestas predefinidas para las respuestas más habituales de los operadores
  • Ampliar tu base de conocimientos para una mejor cobertura de la IA
  • Actualizar tu plan para obtener más mensajes de IA

Por qué importa la simplicidad

Muchas herramientas de chat en vivo requieren procesos de incorporación largos, APIs de JavaScript complejas o trabajo de integración dedicado. Esa complejidad es una barrera para la adopción, y es completamente innecesaria.

Las mejores herramientas respetan tu tiempo. Si no puedes pasar del registro a un widget de chat funcional durante un descanso para tomar un café, la herramienta está complicando las cosas innecesariamente. La atención al cliente debería ayudar a tu negocio, no crear otro proyecto que gestionar.

Cinco minutos. Una etiqueta de script. Atención al cliente instantánea con IA. Así es como debería funcionar.

Etiquetado con:TutorialGetting StartedAI

¿Listo para agregar chat con IA a tu sitio web?