Skip to main content

🚀 Primeros pasos

Esta página te acompaña desde que creas tu cuenta hasta que tu equipo atiende el primer chat: cómo instalar el widget en tu web, en qué orden configurar ZampiBot, cómo está organizado el panel y qué hacer si algo no aparece como esperas.

ZampiBot tiene dos espacios:

Instalar el chat en tu sitio web

  1. Entra a https://chatbot.zampisoft.com/app/portal/installation (portal de cuenta > Instalación).
  2. En la tarjeta Código de inserción, copia el código.
  3. Pégalo justo antes de la etiqueta de cierre </body> en cada página donde quieras mostrar el chat.
  4. Recarga tu sitio: el botón del chat aparece en la esquina inferior derecha (o en la izquierda, si lo cambias en Ajustes > Diseño > Botón e icono de chat > Posición de chat).

El código tiene esta forma:

<!-- ZampiBot -->
<script id="chat-init" async src="https://chatbot.zampisoft.com/account/js/init.js?id=TU_ID"></script>

Usa siempre el código que te muestra tu portal: ya incluye tu número de cuenta (id) correcto. Si copias el ejemplo de esta página, el chat no se conectará a tu cuenta.

Si instalaste el chat hace tiempo, tu código puede no tener el atributo async. Sigue funcionando; si quieres que tu página cargue un poco más rápido, vuelve a copiarlo desde Instalación.

Cómo se ve el chat en teléfonos en una sola página

En los teléfonos, el chat sigue lo que elijas en Ajustes > Diseño > Botón e icono de chat > Chat en móviles (Botón flotante, Pestaña lateral o No mostrar el chat). Si en una página concreta quieres otro comportamiento, añade uno de estos valores al final de la dirección del script, después del id:

Valor Qué hace en esa página
&mobile=button Botón flotante, como en escritorio
&mobile=tab Pestaña lateral
&mobile=hidden No muestra el chat en teléfonos 
<script id="chat-init" async src="https://chatbot.zampisoft.com/account/js/init.js?id=TU_ID&mobile=tab"></script>

Este valor solo cuenta dentro del código de inserción; en las demás páginas manda el ajuste Chat en móviles. Tablets y escritorio no cambian.

Con No mostrar el chat (o &mobile=hidden), el chat sigue abriéndose en el teléfono cuando el visitante llega con un enlace que lo abre (?chat=open, ?conversation= o ?token=, como los de tus correos). Y si el visitante ya escribió, el botón se mantiene durante 24 horas en todo tu sitio para que reciba la respuesta.

Otras tarjetas de la página Instalación

Tarjeta Para qué sirve
Código de inserción El código del widget para tu web (ver arriba).
Enlace directo al chat Una dirección propia donde se abre tu chat sin instalar nada. Sirve para probarlo o para compartirla con tus clientes. Si añades ?ticket al final, se abre el área de tickets.
Enlaces a artículos La dirección de tu página pública de artículos (centro de ayuda).
Mi tienda Solo aparece si tienes WhatsStore: acceso a tu tienda online.
Token de API La clave que necesitas para usar la API web de ZampiBot. Guárdala en privado.

Ruta de uso paso a paso

Si pones ZampiBot en marcha por primera vez, sigue este orden. Así evitas activar funciones sueltas sin entender su efecto.

  1. Instala el chat. Pega el código en tu sitio y confirma que el widget se ve. Si este paso falla, lo demás no se puede probar con normalidad.
  2. Define quién atiende. En el área Usuarios crea a tus agentes con Agregar nuevo usuario (el número de agentes depende de tu plan). Después revisa Ajustes > Administración > Agentes y permisos (privilegios de agentes y supervisores) y, si los necesitas, Ajustes > Misceláneas > Departamentos y enrutamiento (departamentos, Cola y Enrutamiento). Así sabes a quién se le asigna cada conversación.
  3. Ajusta la experiencia del cliente. Revisa las pestañas Chat, Diseño y Mensajes y formularios de Ajustes para controlar cómo se ve el widget, qué pantallas muestra y qué mensajes recibe el visitante.
  4. Configura la disponibilidad. Completa Ajustes > Misceláneas > Horario y zona horaria. Esto decide cuándo estás «en horario», cuándo se muestra el mensaje sin conexión y, si lo activas, cuándo se oculta el chat.
  5. Activa las notificaciones. Revisa Ajustes > Notificaciones antes de abrir el chat al público. Si no lo haces, tu equipo puede no enterarse de los mensajes nuevos.
  6. Conecta tus canales. En Ajustes > Aplicaciones activa solo los canales que realmente uses: WhatsApp, Messenger (Facebook e Instagram), Telegram, Viber, LINE, WeChat o Zalo. Al activar uno aparece su propia pestaña en Ajustes, donde lo conectas. Los canales están disponibles durante la prueba gratuita o con un plan activo.
  7. Decide si usarás inteligencia artificial. Activa la app Inteligencia artificial en Ajustes > Aplicaciones cuando ya entiendas el flujo básico. Aparecerá el área Chatbot en el menú: primero entrena con tu contenido y pruébalo en el Playground, después ajusta las respuestas y al final la derivación a un humano.
  8. Prueba todo antes de entregar. Envía mensajes de prueba, revisa las asignaciones, confirma que llegan las notificaciones y valida que los canales externos responden.

Si saltas este orden, puedes creer que algo está roto cuando en realidad solo faltó un ajuste previo. Lo más común es que el problema esté en los permisos de un agente, en el horario o en un canal conectado a medias.

Configuración recomendada

ZampiBot tiene muchas funciones. Estas son las que recomendamos dejar listas desde el principio:

  1. Notificaciones para tu equipo. En Ajustes > Notificaciones:
    • Notificaciones por correo > Notificaciones por correo electrónico del agente: los agentes reciben un correo cuando llega un mensaje y no están conectados.
    • Sonido y alertas > Ajustes de sonido: activa Activo - administrador y elige el Volumen - administrador para oír los mensajes nuevos en el panel.
    • Notificaciones push: marca Activo para agentes, guarda y pulsa Suscribir en cada navegador o teléfono donde quieras recibir avisos. El servicio de push ya viene configurado; no necesitas claves.
  2. Correo saliente (opcional). Si no configuras un servidor propio, los correos salen por el servidor compartido de ZampiBot, con un límite de 300 correos al día por cuenta. Para enviar más, o con tu propio dominio como remitente, configura tu servidor en Ajustes > Notificaciones > Servidor de correo > SMTP y usa el botón Solucionar problemas para comprobarlo.
  3. Mensajes automáticos. En Ajustes > Mensajes y formularios configura el Mensaje de seguimiento (pide los datos de contacto al visitante) y el Mensaje sin conexión (avisa cuando no hay nadie disponible).
  4. Tiempo real. Ya viene activado: los mensajes llegan al instante al panel y al widget. No hay que configurar nada.
  5. Chatbot. Si vas a usar el chatbot, revisa su configuración recomendada en Chatbot e Inteligencia artificial.
  6. Ayuda con las integraciones. Si tienes dificultades para conectar servicios como Google, WhatsApp o Messenger, escríbenos desde el chat del portal y te ayudamos. Conectar tus propias cuentas de Google o Meta te da control total sobre tus datos y tus gastos.

Tour guiado de bienvenida

La primera vez que entras al portal después de crear tu cuenta, ZampiBot te muestra un recorrido guiado en dos partes. Puedes avanzar con Siguiente →, volver con ← Atrás o cerrarlo en el primer paso con Saltar todo.

Parte 1 — Portal de cuenta (hasta 5 pasos):

  1. Verifica tu perfil: confirma tu nombre y correo. Si aún no verificaste el correo, puedes pulsar Verificar sin perder el tour: continúa cuando confirmes el código.
  2. Código de inserción: dónde copiar el código para tu web.
  3. Enlace directo al chat: para ver tu chat y compartirlo sin instalar nada.
  4. Membresías y créditos: planes y créditos.
  5. ¡Todo listo!: el botón Ir al Panel → te lleva al panel.

Parte 2 — Panel (hasta 9 pasos): Conversaciones, Chatbot, Ajustes, Aplicaciones, Diseño del widget, Inteligencia artificial, Messenger e Instagram, WhatsApp Business y, al final, dónde encontrar la documentación. Termina con ¡Listo! Empezar → (en el primer paso también puedes pulsar Saltar todo).

El tour del portal oscurece el resto de la pantalla mientras avanzas. El del panel no la bloquea: puedes seguir usando el panel mientras está abierto. Los pasos de áreas a las que tu usuario no tiene acceso (por ejemplo, Chatbot o Ajustes) no se muestran.

El tour aparece una sola vez por cuenta, en el navegador con el que creaste la cuenta. Si lo cierras o lo terminas, no vuelve a salir, y no hay un botón para repetirlo.

Cómo es el panel

Menú de áreas

En el ordenador, el menú es una barra vertical a la izquierda. Arriba están las áreas, en este orden:

Área Para qué sirve
Conversaciones Atender los chats de todos tus canales. La ven todos los agentes.
Usuarios Clientes, leads, visitantes y tu equipo.
Chatbot Entrenar el chatbot, crear flujos y probarlo. Aparece al activar la app Inteligencia artificial.
Artículos Tu centro de ayuda.
Informes Estadísticas de conversaciones, chatbot, usuarios, agentes, artículos y mensajes.
Tickets Tablero de tickets. Aparece al activar la app Tickets.
Encuestas Encuestas y formularios. Aparece al activar la app Encuestas.
Respuestas guardadas Textos listos para insertar en tus respuestas.

Debajo de las áreas pueden aparecer dos accesos más:

  • Tienda: abre tu tienda de WhatsStore en una pestaña nueva. Solo aparece si tienes WhatsStore activo y acceso a la tienda.
  • Chat directo: abre tu chat en su página propia, en una pestaña nueva. Solo lo ven los administradores.

Accesos de la parte inferior

En la parte de abajo de la barra están:

  • Ajustes (engranaje): toda la configuración. La ven los administradores y los supervisores con ese permiso.
  • Novedades (campana): las novedades de ZampiBot. Un punto azul indica que hay algo que aún no viste; se apaga al abrirlas. Se cierra con Esc, con la ✕ o haciendo clic fuera.
  • Documentos: abre esta documentación en una pestaña nueva.
  • Tu foto (menú de cuenta): al pulsarla se abre un menú con:
    • En línea / Ausente: cambia tu estado. Mientras estás Ausente, no se te considera conectado para recibir chats. Si usas Cola o Enrutamiento, al volver a En línea se te asignan las conversaciones que esperaban.
    • Editar perfil (administradores): tu nombre, foto y datos.
    • Cuenta (administradores): te lleva a Membresías en el portal.
    • Cambiar de cuenta (administradores): solo aparece si configuraste otras cuentas en Ajustes > Administración > Otros ajustes > Cambiar de cuenta.
    • Modo oscuro / Modo claro: cambia el tema del panel.
    • Cerrar sesión.

Los administradores ven además, bajo su foto, la versión publicada de ZampiBot.

Si activas Ajustes > Notificaciones > Sonido y alertas > Modo ausente, el panel te pone Ausente solo tras 10 minutos sin actividad y te devuelve a En línea en cuanto mueves el ratón o pulsas una tecla. Funciona solo en pantallas de ordenador. Si cambias tu estado a mano, el modo automático se detiene hasta que recargues el panel.

En el teléfono

En pantallas pequeñas no caben todas las áreas. Pulsa Más para abrir una hoja con todas las áreas a la vista y el acceso a tu menú de cuenta.

Instalar el panel como aplicación (PWA)

El panel de ZampiBot se puede instalar como una aplicación en tu ordenador, Android, iPhone o iPad. Se abre en su propia ventana, sin barra del navegador, y funciona igual que en la web.

Funciona mejor con Google Chrome (ordenador y Android) y Safari (iPhone y iPad). Instálalo siempre desde https://chatbot.zampisoft.com/app/admin/.

En el ordenador (Chrome)

  1. Entra al panel: https://chatbot.zampisoft.com/app/admin/
  2. Haz clic en el icono de instalar que aparece a la derecha de la barra de direcciones.
  3. Confirma con Instalar.

En Android (Chrome)

  1. Entra al panel con Google Chrome.
  2. Abre el menú del navegador (los tres puntos).
  3. Toca Agregar a la pantalla principal o Instalar aplicación (el nombre exacto depende de la versión de Chrome).
  4. Confirma con Agregar.

En iPhone o iPad (Safari)

  1. Entra al panel con Safari.
  2. Toca el botón Compartir y elige Agregar a pantalla de inicio (el nombre exacto puede variar según la versión de iOS).
  3. Toca Agregar en la esquina superior derecha.

Si instalaste la aplicación hace tiempo, cuando el panel estaba en otra dirección, desinstálala y vuelve a instalarla desde https://chatbot.zampisoft.com/app/admin/ para que se abra directamente en el panel actual.

Atajos de teclado

Funcionan en Windows y en Mac (en Mac, Ctrl es Cmd).

Atajo Dónde Qué hace
Enter Editor de mensajes Envía el mensaje.
Mayús + Enter Editor de mensajes Salto de línea.
## Editor de mensajes Abre la lista de respuestas guardadas. Dentro de ella: ↑ ↓ para moverte, Enter para insertar la resaltada, Esc para cerrar.
#nombre + Espacio Editor de mensajes Inserta la respuesta guardada con ese nombre exacto (distingue mayúsculas y minúsculas).
Enter o Espacio Diálogo de confirmación Confirma (equivale a pulsar Aceptar). Dentro de un campo de texto, Espacio escribe normalmente, y en un campo de varias líneas Enter hace un salto de línea.
Esc o Supr Diálogo de confirmación Cancela y cierra el diálogo. Supr no lo cierra mientras escribes en uno de sus campos: ahí borra el carácter, como siempre.
Esc Visor de imágenes, Novedades, menús y paneles Cierra lo que esté abierto.
Ctrl + K Usuarios Pone el cursor en la búsqueda.
Ctrl + S Ajustes Guarda los cambios.
Enter o Espacio Iconos y botones del panel Activa el icono que tiene el foco (para usar el panel solo con teclado, moviéndote con Tab).

Parámetros de URL útiles

En las páginas de tu web (widget)

Añade estos parámetros a la dirección de cualquier página donde esté instalado el chat:

Parámetro Qué hace
?chat=open Abre el chat automáticamente al cargar la página.
?token=TOKEN Inicia sesión automáticamente con un usuario existente. El token tiene 40 caracteres (letras y números) y los administradores lo ven en la ficha del usuario. Trátalo como una contraseña.
?conversation=ID Abre una conversación concreta. Si el usuario no ha iniciado sesión en ese navegador, añade también &token=TOKEN.
?conversation=ID&rating=1 Abre la conversación y registra una valoración: 1 positiva, -1 negativa. Es lo que usan los enlaces de valoración del correo.

También puedes poner chat=open en el propio código de inserción para que el chat se abra solo en todas las páginas que lo llevan:

<script id="chat-init" async src="https://chatbot.zampisoft.com/account/js/init.js?id=TU_ID&chat=open"></script>

En la página de artículos (centro de ayuda) funcionan ?article_id=ID (abre un artículo), ?category=ID (abre una categoría), ?search=texto (muestra una búsqueda) y ?lang=código (idioma). Más detalles en Artículos.

En el panel

Añade estos parámetros a https://chatbot.zampisoft.com/app/admin/

Parámetro Qué hace
?area=NOMBRE Abre un área: conversations, users, chatbot, articles, reports, tickets, surveys, saved-replies o settings.
?conversation=ID Abre una conversación concreta.
?conversation_status=N Abre Conversaciones en una bandeja: 0 Buzón, 3 Archivo, 4 Papelera.
?user=ID Abre la ficha de un usuario en Usuarios.
?setting=PESTAÑA Abre una pestaña de Ajustes, por ejemplo chat, admin, notifications, users, design, messages, apps, articles, automations, various (Misceláneas), translations, o la de un canal activo como whatsapp.
?report=NOMBRE Abre una categoría de Informes: conversations, chatbot, users, agents, articles o messages.

Por seguridad, el panel no acepta usuario y contraseña en la dirección. Para entrar, usa siempre la pantalla de inicio de sesión.

Problemas frecuentes

Si algo no funciona, revisa primero esta lista. Si sigues con el problema, escríbenos desde el chat del portal.

El widget de chat no se muestra

  1. Revisa los ajustes que ocultan el chat. En Ajustes > Chat, comprueba que estén desactivados:
    • Disponibilidad > Ocultar el chat fuera del horario de oficina (oculta el chat cuando estás fuera del horario de Misceláneas > Horario y zona horaria).
    • Disponibilidad > Ocultar chat si no hay agentes en línea (oculta el chat si todos los agentes están desconectados).
    • Inicialización e idioma > Inicialización de inicio de sesión (solo muestra el chat a usuarios que iniciaron sesión).
    • Inicialización e idioma > Inicialización manual (el chat no arranca solo; hay que iniciarlo con código propio).
  2. Si no se ve solo en teléfonos, revisa Ajustes > Diseño > Botón e icono de chat > Chat en móviles (que no esté en No mostrar el chat) y que el código de esa página no lleve &mobile=hidden.
  3. Comprueba el código. Debe estar pegado una sola vez por página, antes de </body>, y ser el de tu portal (con tu id).
  4. Desactiva optimizaciones de tu sitio. Plugins o funciones de caché, de minimización o de combinación de JavaScript pueden romper el código. Desactívalos, limpia la caché y vuelve a probar.
  5. Revisa CDN, proxy o firewall (ver más abajo).

Las conversaciones no aparecen para un agente

  1. Departamentos. El agente tiene asignado un departamento, pero las conversaciones no están asignadas a ese departamento. Revisa el departamento en su ficha de Usuarios.
  2. Reparto de conversaciones. Alguno de estos ajustes está activo en Ajustes > Misceláneas > Departamentos y enrutamiento:
    • Enrutamiento
    • Cola
    • Ocultar conversaciones de otros agentes
  3. Chatbot con derivación a humano. Si usas el chatbot y está activa la derivación a un humano (Ajustes > Inteligencia artificial > Comportamiento > Toma de control humana), las conversaciones que atiende el bot quedan en la bandeja Archivo hasta que se transfieren a un agente. Búscalas ahí.

En los casos 1 y 2, comprueba también que entraste con el agente correcto.

No veo un área en el menú

  • Chatbot: activa la app Inteligencia artificial en Ajustes > Aplicaciones. Solo la ven administradores y supervisores con permiso de ajustes.
  • Tickets y Encuestas: activa su app en Ajustes > Aplicaciones.
  • Informes o Artículos: revisa que no estén marcados Desactivar informes o Desactivar artículos en Ajustes > Misceláneas > Sistema y rendimiento > Optimización del rendimiento. Los agentes nunca ven Informes: solo los administradores y los supervisores con permiso.
  • Usuarios y Artículos para agentes: dependen de Ajustes > Administración > Agentes y permisos > Privilegios del agente (Área de usuarios, Área de artículos).
  • Supervisores: ven Usuarios, Ajustes (y con él Chatbot), Informes, Artículos y Tickets solo si su fila de Ajustes > Administración > Agentes y permisos > Supervisores tiene marcada el área correspondiente. Encuestas y Respuestas guardadas no las ven.
  • Ajustes: solo lo ven los administradores y los supervisores con ese permiso.

El iPhone amplía la pantalla al escribir

En teléfonos, el campo de texto del chat ya usa un tamaño de letra de 16 px, que es lo que evita que el iPhone haga zoom al tocarlo. Si aun así ves zoom (por ejemplo, porque los estilos de tu web cambian el tamaño de la letra), puedes añadir esta línea dentro del <head> de las páginas con chat:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />

Ten en cuenta que esta línea impide que tus visitantes amplíen toda la página con los dedos.

Cloudflare, firewall o bloqueadores

Si usas Cloudflare, otro CDN o un firewall en tu sitio, asegúrate de que no bloqueen el dominio chatbot.zampisoft.com: de ahí se cargan el widget y sus mensajes. Para comprobarlo, desactiva temporalmente el CDN o el firewall (o prueba desde otra red o con una VPN) y vuelve a cargar la página. Si con eso el chat aparece, añade chatbot.zampisoft.com a las excepciones permitidas.