🧩 Cómo crear e insertar un chat widget en tu página web con IA Closer

Este procedimiento te muestra paso a paso cómo crear un widget de chat en tiempo real desde Closer, personalizarlo y colocarlo tanto dentro del sistema como en una página externa (por ejemplo, WordPress u otro sitio web).

🧱 Paso 1: Acceder a la sección de widgets de chat

1. Inicia sesión en tu cuenta de IA Closer.

2. En el menú lateral izquierdo, haz clic en "Sitios".

3. En la parte superior derecha, haz clic en "Widget de Chat".

4. Haz clic en "Nuevo" para crear un nuevo widget.

💬 Paso 2: Seleccionar el tipo de chat

1. Verás varias opciones de widgets de chat:

   • Chat todo en uno (WhatsApp, Live Chat, etc.)

   • Chat en tiempo real

   • Chat de Instagram

   • Chat de voz

   • Chat SMS / Email

   • Chat de Facebook

   • Chat solo de WhatsApp

2. Selecciona la opción "Chat en tiempo real".

📝 Paso 3: Configurar y personalizar el widget

A. Información general

1. Asigna un nombre al widget (ejemplo: Live Chat Claudia 1).

B. Estilos del widget

1. Cambia el icono del chat o sube uno personalizado.

2. Decide si deseas mostrar la imagen de una persona junto al widget.

3. Elige un tema de colores predefinido o personaliza los colores según tu marca:

   • Color de burbuja

   • Color del fondo

   • Etc.

C. Traducción del contenido

1. Traduce todos los textos predeterminados del widget al español.

   • Puedes hacerlo manualmente o usando una herramienta como ChatGPT (ej: “Traduce esto al español”).

2. Actualiza los textos traducidos en cada sección correspondiente:

   • Ventana del chat

   • Títulos e introducciones

   • Mensajes automáticos

D. Personalización avanzada

1. Cambia la posición del widget en pantalla.

2. Ajusta el tamaño del cuadro de chat.

3. Reemplaza la imagen del agente si lo deseas.

📥 Paso 4: Agregar formulario de contacto (opcional)

1. Activa la opción para mostrar un formulario antes de iniciar el chat.

2. Añade los campos que deseas recolectar:

   • Nombre

   • Teléfono

   • Correo electrónico

3. Personaliza el botón con el texto "Enviar" o el que prefieras.

4. Puedes agregar una URL de redirección después de completar el formulario (opcional).

🧑‍💼 Paso 5: Configurar la experiencia del usuario

1. Traduce los mensajes automáticos de:

   • Chat inactivo (si el usuario deja de responder)

   • Chat cerrado

2. Define el tiempo de espera por inactividad (ej: 5 minutos).

3. Agrega mensajes personalizados de agradecimiento o inicio.

4. Establece el idioma del widget en Español.

⏰ Paso 6: Configurar horario de atención (opcional)

1. Si deseas mostrar el chat solo en un horario determinado:

   • Ve a "Configuración del horario comercial".

   • Define los días y horas en que estará disponible el chat.

🔔 Paso 7: Activar opciones adicionales

1. Habilita o desactiva el sonido de notificaciones.

2. Cambia o elimina el branding de la agencia si lo deseas.

3. Haz clic en "Guardar".

🌐 Paso 8: Insertar el widget en tu sitio web

Opción A: WordPress

1. Descarga el plugin Lead Connector desde tu panel de WordPress.

2. Instálalo y actívalo.

3. El plugin te permitirá insertar el widget automáticamente en tus páginas.

Opción B: Otros sitios web

1. Haz clic en "Obtener código" desde el panel de Closer.

2. Copia el fragmento de código generado.

3. Pega el código en el cuerpo (body) HTML de tu página web.

   • Puedes insertarlo como un widget HTML o directamente en el archivo fuente.

🧪 Paso 9: Activar el widget en una página creada dentro de Closer

1. Ve a Sitios > Embudos y crea una página nueva.

2. Diseña tu página (por ejemplo, añade un título).

3. Publica la página y asigna un dominio si es necesario.

4. En el editor de la página, ve a Configuración > Widget de Chat.

5. Selecciona el widget creado previamente.

6. Haz clic en Guardar.

7. Abre la página y verifica que el widget aparece y funciona correctamente.

✅ Resultado final

Tu widget de chat en tiempo real estará activo y visible en tu sitio web (dentro o fuera de Closer), permitiendo a tus visitantes contactarte fácilmente y en vivo.

❗Notas importantes

• Traducción manual recomendada: Asegúrate de revisar todas las secciones para traducir correctamente los textos al español.

• Prueba el widget: Antes de publicarlo oficialmente, haz pruebas para verificar su funcionamiento y apariencia en diferentes dispositivos.

• Dominio activo: Si estás insertando el widget dentro de Closer, asegúrate de tener un dominio o subdominio configurado.

🤔 Preguntas frecuentes que este SOP resuelve

1. ¿Cómo creo un chat en vivo personalizado para mi página web desde Closer?

2. ¿Qué pasos debo seguir para insertar un widget de chat en una página externa como WordPress?

3. ¿Cómo traduzco y personalizo los textos predeterminados del widget de Closer al español?