Skip to main content

🚀 Primeros pasos

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

ZampiBot tiene dos espacios:

  • Portal de cuenta: https://chatbot.zampisoft.com/app/portal/ ‚Äî— aqu√≠aquí est√°nestán tu Instalaci√≥nInstalación, Membres√≠asMembresías, Facturas, Perfil y Recomendar un amigo.
  • Panel: https://chatbot.zampisoft.com/app/admin/ ‚Äî— aqu√≠aquí atiendes conversaciones y configuras todo lo dem√°s.demás. Desde el portal llegas con el bot√≥nbotón Panel de control (arriba a la derecha).

Instalar el chat en tu sitio web

  1. Entra a https://chatbot.zampisoft.com/app/portal/installation (portal de cuenta > Instalaci√≥nInstalación).
  2. En la tarjeta C√≥digoCódigo de inserci√≥ninserción, copia el c√≥digo.código.
  3. P√©galoPégalo justo antes de la etiqueta de cierre </body> en cada p√°ginapágina donde quieras mostrar el chat.
  4. Recarga tu sitio: el bot√≥nbotón del chat aparece en la esquina inferior derecha.

El c√≥digocó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√≥digocódigo que te muestra tu portal: ya incluye tu n√∫meronúmero de cuenta (id) correcto. Si copias el ejemplo de esta p√°gina,página, el chat no se conectar√°conectará a tu cuenta.

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

C√≥moCómo se ve el chat en tel√©fonosteléfonos en una sola p√°ginapágina

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

Valor Qu√©Qué hace en esa p√°ginapágina
&mobile=button Bot√≥nBotón flotante, como en escritorio
&mobile=tab Pesta√±aPestaña lateral
&mobile=hidden No muestra el chat en tel√©fonostelé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√≥digocódigo de inserci√≥n;inserción; en las dem√°sdemás p√°ginaspáginas manda el ajuste Chat en m√≥vilesmóviles. Tablets y escritorio no cambian.

Otras tarjetas de la p√°ginapágina Instalaci√≥nInstalación

Tarjeta Para qu√©qué sirve
C√≥digoCódigo de inserci√≥ninserción El c√≥digocódigo del widget para tu web (ver arriba).
Enlace directo al chat Una direcci√≥ndirección propia donde se abre tu chat sin instalar nada. Sirve para probarlo o para compartirla con tus clientes. Si a√±adesañades ?ticket al final, se abre el √°reaárea de tickets.
Enlaces a art√≠culosartículos La direcci√≥ndirección de tu p√°ginapágina p√∫blicapública de art√≠culosartí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√°rdalaGuárdala en privado.

Ruta de uso paso a paso

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

  1. Instala el chat. Pega el c√≥digocódigo en tu sitio y confirma que el widget se ve. Si este paso falla, lo dem√°sdemás no se puede probar con normalidad.
  2. Define qui√©nquién atiende. En el √°reaárea Usuarios crea a tus agentes con Agregar nuevo usuario (el n√∫meronúmero de agentes depende de tu plan). Despu√©sDespués revisa Ajustes > Administraci√≥nAdministración > Agentes y permisos (privilegios de agentes y supervisores) y, si los necesitas, Ajustes > Miscel√°neasMisceláneas > Departamentos y enrutamiento (departamentos, Cola y Enrutamiento). As√≠Así sabes a qui√©nquién se le asigna cada conversaci√≥n.conversación.
  3. Ajusta la experiencia del cliente. Revisa las pesta√±aspestañas Chat, Dise√±oDiseño y Mensajes y formularios de Ajustes para controlar c√≥mocómo se ve el widget, qu√©qué pantallas muestra y qu√©qué mensajes recibe el visitante.
  4. Configura la disponibilidad. Completa Ajustes > Miscel√°neasMisceláneas > Horario y zona horaria. Esto decide cu√°ndocuándo est√°sestás ¬´«en horario¬ª,horario», cu√°ndocuándo se muestra el mensaje sin conexi√≥nconexión y, si lo activas, cu√°ndocuándo se oculta el chat.
  5. Activa las notificaciones. Revisa Ajustes > Notificaciones antes de abrir el chat al p√∫blico.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√±apestaña en Ajustes, donde lo conectas. Los canales est√°nestán disponibles durante la prueba gratuita o con un plan activo.
  7. Decide si usar√°susarás inteligencia artificial. Activa la app Inteligencia artificial en Ajustes > Aplicaciones cuando ya entiendas el flujo b√°sico.básico. Aparecer√°Aparecerá el √°reaárea Chatbot en el men√∫:menú: primero entrena con tu contenido y pru√©balopruébalo en el Playground, despu√©sdespués ajusta las respuestas y al final la derivaci√≥nderivación a un humano.
  8. Prueba todo antes de entregar. Env√≠aEnví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√°está roto cuando en realidad solo falt√≥faltó un ajuste previo. Lo m√°smás com√∫ncomún es que el problema est√©esté en los permisos de un agente, en el horario o en un canal conectado a medias.

Configuraci√≥nConfiguració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√≥nicoelectrónico del agente: los agentes reciben un correo cuando llega un mensaje y no est√°nestán conectados.
    • Sonido y alertas > Ajustes de sonido: activa Activo - administrador y elige el Volumen - administrador para o√≠roír los mensajes nuevos en el panel.
    • Notificaciones push: marca Activo para agentes, guarda y pulsa Suscribir en cada navegador o tel√©fonotelé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√≠mitelímite de 300 correos al d√≠adía por cuenta. Para enviar m√°s,más, o con tu propio dominio como remitente, configura tu servidor en Ajustes > Notificaciones > Servidor de correo > SMTP y usa el bot√≥nbotón Solucionar problemas para comprobarlo.
  3. Mensajes autom√°ticos.automáticos. En Ajustes > Mensajes y formularios configura el Mensaje de seguimiento (pide los datos de contacto al visitante) y el Mensaje sin conexi√≥nconexió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√≥nconfiguración recomendada en Chatbot e Inteligencia artificial.
  6. Ayuda con las integraciones. Si tienes dificultades para conectar servicios como Google, WhatsApp o Messenger, escr√≠benosescrí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√©sdespués de crear tu cuenta, ZampiBot te muestra un recorrido guiado en dos partes. Puedes avanzar con Siguiente ‚Üí→, volver con ‚Üê← Atr√°sAtrá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√∫naún no verificaste el correo, puedes pulsar Verificar sin perder el tour: contin√∫acontinúa cuando confirmes el c√≥digo.código.
  2. C√≥digoCódigo de inserci√≥ninserción: d√≥ndedónde copiar el c√≥digocódigo para tu web.
  3. Enlace directo al chat: para ver tu chat y compartirlo sin instalar nada.
  4. Membres√≠aMembresía y cr√©ditoscréditos: planes y cr√©ditos.créditos.
  5. ¬°¡Todo listo!: el bot√≥nbotón Ir al Panel ‚Üí→ te lleva al panel.

Parte 2 ‚Äî— Panel (hasta 9 pasos): Conversaciones, Chatbot, Ajustes, Aplicaciones, Dise√±oDiseño del widget, Inteligencia artificial, Messenger e Instagram, WhatsApp Business y, al final, d√≥ndedónde encontrar la documentaci√≥n.documentación. Termina con ¬°¡Listo! Empezar ‚Üí→.

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

El tour aparece una sola vez por navegador. Si lo cierras o lo terminas, no vuelve a salir.

C√≥moCómo es el panel

Men√∫Menú de √°reasáreas

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

√ÅreaÁrea Para qu√©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√≠culosArtículos Tu centro de ayuda.
Informes Estad√≠sticasEstadísticas de conversaciones, chatbot, usuarios, agentes, art√≠culosartí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áreas pueden aparecer dos accesos m√°s:más:

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

Accesos de la parte inferior

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

  • Ajustes (engranaje): toda la configuraci√≥n.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√∫naún no viste; se apaga al abrirlas. Se cierra con Esc, con la ‚úï✕ o haciendo clic fuera.
  • Documentos: abre esta documentaci√≥ndocumentación en una pesta√±apestaña nueva.
  • Tu foto (men√∫menú de cuenta): al pulsarla se abre un men√∫menú con:
    • En l√≠nealínea / Ausente: cambia tu estado. Mientras est√°sestás Ausente, no se te considera conectado para recibir chats.
    • Editar perfil (administradores): tu nombre, foto y datos.
    • Cuenta (administradores): te lleva a Membres√≠asMembresías en el portal.
    • Cambiar de cuenta (administradores): solo aparece si configuraste otras cuentas en Ajustes > Administraci√≥nAdministración > Otros ajustes > Cambiar de cuenta.
    • Modo oscuro / Modo claro: cambia el tema del panel.
    • Cerrar sesi√≥nsesión.

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

En el tel√©fonoteléfono

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

Instalar el panel como aplicaci√≥naplicación (PWA)

El panel de ZampiBot se puede instalar como una aplicaci√≥naplicació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√°laloInstá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√∫menú del navegador (los tres puntos).
  3. Toca Agregar a la pantalla principal (o Instalar aplicaci√≥naplicación).
  4. Confirma con Agregar.

En iPhone o iPad (Safari)

  1. Entra al panel con Safari.
  2. Toca el bot√≥nbotón Compartir y elige Agregar a inicio.
  3. Toca Agregar en la esquina superior derecha.

Si instalaste la aplicaci√≥naplicación hace tiempo, cuando el panel estaba en otra direcci√≥n,dirección, desinst√°laladesinstá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√≥ndeDónde Qu√©Qué hace
Enter Editor de mensajes Env√≠aEnvía el mensaje.
May√∫sMayús + Enter Editor de mensajes Salto de l√≠nea.línea.
## Editor de mensajes Abre la lista de respuestas guardadas. Dentro de ella: ‚Üë↑ ‚Üì↓ para moverte, Enter para insertar, Esc para cerrar.
#nombre + Espacio Editor de mensajes Inserta la respuesta guardada con ese nombre exacto (distingue may√∫sculasmayúsculas y min√∫sculas)minúsculas).
Enter o Espacio Di√°logoDiálogo de confirmaci√≥nconfirmación Confirma (equivale a pulsar Aceptar). Dentro de un campo de texto, Espacio escribe normalmente.
Esc o Supr Di√°logoDiálogo de confirmaci√≥nconfirmación Cancela y cierra el di√°logo.diálogo.
Esc Visor de im√°genes,imágenes, Novedades, men√∫smenús y paneles Cierra lo que est√©esté abierto.
Ctrl + K Usuarios Pone el cursor en la b√∫squeda.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√©ndotemoviéndote con Tab).

Par√°metrosParámetros de URL √∫tilesútiles

En las p√°ginaspáginas de tu web (widget)

A√±adeAñade estos par√°metrosparámetros a la direcci√≥ndirección de cualquier p√°ginapágina donde est√©esté instalado el chat:

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

Tambi√©nTambién puedes poner chat=open en el propio c√≥digocódigo de inserci√≥ninserción para que el chat se abra solo en todas las p√°ginaspá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√°ginapágina de art√≠culosartículos (centro de ayuda) funcionan ?article_id=ID (abre un art√≠culo)artículo), ?category=ID (abre una categor√≠a)categoría), ?search=texto (muestra una b√∫squeda)búsqueda) y ?lang=c√≥digocódigo (idioma). M√°sMás detalles en Art√≠culosArtículos.

En el panel

A√±adeAñade estos par√°metrosparámetros a https://chatbot.zampisoft.com/app/admin/

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

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

Problemas frecuentes

Si algo no funciona, revisa primero esta lista. Si sigues con el problema, escr√≠benosescrí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√©nestén desactivados:
    • Disponibilidad > Ocultar el chat fuera del horario de oficina (oculta el chat cuando est√°sestás fuera del horario de Miscel√°neasMisceláneas > Horario y zona horaria).
    • Disponibilidad > Ocultar chat si no hay agentes en l√≠nealínea (oculta el chat si todos los agentes est√°nestán desconectados).
    • Inicializaci√≥nInicialización e idioma > Inicializaci√≥nInicialización de inicio de sesi√≥nsesión (solo muestra el chat a usuarios que iniciaron sesi√≥n)sesión).
    • Inicializaci√≥nInicialización e idioma > Inicializaci√≥nInicialización manual (el chat no arranca solo; hay que iniciarlo con c√≥digocódigo propio).
  2. Si no se ve solo en tel√©fonosteléfonos, revisa Ajustes > Dise√±oDiseño > Bot√≥nBotón e icono de chat > Chat en m√≥vilesmóviles (que no est√©esté en No mostrar el chat) y que el c√≥digocódigo de esa p√°ginapágina no lleve &mobile=hidden.
  3. Comprueba el c√≥digo.código. Debe estar pegado una sola vez por p√°gina,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√©,caché, de minimizaci√≥nminimización o de combinaci√≥ncombinación de JavaScript pueden romper el c√≥digo.código. Desact√≠valos,Desactívalos, limpia la cach√©caché y vuelve a probar.
  5. Revisa CDN, proxy o firewall (ver m√°smás abajo).

Las conversaciones no aparecen para un agente

  1. Departamentos. El agente tiene asignado un departamento, pero las conversaciones no est√°nestán asignadas a ese departamento. Revisa el departamento en su ficha de Usuarios.
  2. Reparto de conversaciones. Alguno de estos ajustes est√°está activo en Ajustes > Miscel√°neasMisceláneas > Departamentos y enrutamiento:
    • Enrutamiento
    • Cola
    • Ocultar conversaciones de otros agentes
  3. Chatbot con derivaci√≥nderivación a humano. Si usas el chatbot y est√°está activa la derivaci√≥nderivación a un humano (Ajustes > Inteligencia artificial > Comportamiento > Toma de control humana, que hoy aparece en pantalla como ¬´Adquisici√≥n«Adquisición humana¬ª)humana»), las conversaciones que atiende el bot quedan en Archivados hasta que se transfieren a un agente. B√∫scalasBúscalas ah√≠.ahí.

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

No veo un √°reaárea en el men√∫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√≠culosArtículos: revisa que no est√©nestén marcados Desactivar informes o Desactivar art√≠culosartículos en Ajustes > Miscel√°neasMisceláneas > Sistema y rendimiento > Optimizaci√≥nOptimización del rendimiento.
  • Usuarios y Art√≠culosArtículos para agentes: dependen de Ajustes > Administraci√≥nAdministración > Agentes y permisos > Privilegios del agente (√ÅreaÁrea de usuarios, √ÅreaÁrea de art√≠culosartículos).
  • Ajustes: solo lo ven los administradores y los supervisores con ese permiso.

El iPhone ampl√≠aamplía la pantalla al escribir

En tel√©fonos,teléfonos, el campo de texto del chat ya usa un tama√±otamaño de letra de 16 px, que es lo que evita que el iPhone haga zoom al tocarlo. Si aun as√≠así ves zoom (por ejemplo, porque los estilos de tu web cambian el tama√±otamaño de la letra), puedes a√±adirañadir esta l√≠nealínea dentro del <head> de las p√°ginaspá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√≠nealínea impide que tus visitantes ampl√≠enamplíen toda la p√°ginapágina con los dedos.

Cloudflare, firewall o bloqueadores

Si usas Cloudflare, otro CDN o un firewall en tu sitio, aseg√∫rateasegúrate de que no bloqueen el dominio chatbot.zampisoft.com: de ah√≠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.página. Si con eso el chat aparece, a√±adeañade chatbot.zampisoft.com a las excepciones permitidas.