Saltar al contenido principal

Chatbot Appearance: posición, color y comportamiento

Chatbot Appearance controla cómo se ve y cómo se comporta el chatbot en tu sitio web.

No basta con que el chatbot responda correctamente. También debe verse bien, no molestar al visitante y encajar con la marca del sitio.

Cuándo usar esta guía​

Usa esta guía cuando quieras:

  • cambiar la posición del chatbot,
  • ajustar colores,
  • adaptar el chatbot a tu marca,
  • revisar cómo se ve en móvil,
  • configurar si se abre automáticamente,
  • cambiar el mensaje de bienvenida,
  • hacer el widget más discreto o más visible,
  • mejorar la experiencia del visitante.

Por qué importa la apariencia​

El chatbot es visible en muchas páginas del sitio.

Si es demasiado agresivo, puede molestar.

Si está demasiado oculto, puede que nadie lo use.

El objetivo es que sea:

  • visible,
  • útil,
  • discreto,
  • fácil de abrir,
  • correcto en móvil,
  • coherente con la marca.

Paso 1 — Abre Chatbot settings​

Abre la aplicación de Centuply, selecciona tu sitio y abre Chatbot.

Después abre las opciones de apariencia, como Appearance, Style, Widget o la pestaña correspondiente.

Paso 2 — Elige la posición del widget​

El chatbot normalmente aparece abajo a la derecha o abajo a la izquierda.

La posición más común es abajo a la derecha, porque los visitantes la reconocen fácilmente.

Pero revisa si:

  • cubre botones,
  • cubre formularios,
  • oculta navegación móvil,
  • se superpone a un sticky CTA,
  • bloquea contenido importante.

Paso 3 — Configura colores​

El chatbot debe encajar con los colores del sitio.

Normalmente puedes configurar:

  • color del botón,
  • color del header,
  • color de mensajes,
  • color de fondo,
  • color de texto,
  • color de acento.

Usa colores con buen contraste para que todo se lea fácilmente.

Paso 4 — Configura el mensaje de bienvenida​

El mensaje de bienvenida es el primer mensaje que ve el visitante.

Ejemplos:

¡Hola! ¿Cómo podemos ayudarte?

¿Necesitas ayuda con servicios o reservas?

Pregúntanos sobre servicios, horario o ubicación.

Mantén el mensaje breve, cercano y relacionado con el negocio.

Paso 5 — Configura quick actions​

Si el chatbot admite quick actions, añade opciones útiles.

Ejemplos:

  • Ver servicios,
  • Reservar cita,
  • Contactar,
  • Solicitar presupuesto,
  • Ver horario,
  • Encontrar ubicación.

Las quick actions ayudan al visitante a continuar sin escribir una pregunta.

Paso 6 — Configura auto-open​

En algunos sitios, el chatbot puede abrirse automáticamente después de unos segundos.

Usa esta función con cuidado.

Auto-open puede ayudar, pero también puede molestar si aparece demasiado rápido.

Buenas prácticas:

  • no abrir inmediatamente,
  • no cubrir el hero,
  • no reabrirse constantemente,
  • ser fácil de cerrar,
  • no perjudicar la experiencia móvil.

Paso 7 — Revisa la apariencia móvil​

El móvil es crítico.

Abre mobile preview y revisa:

  • si el botón del chatbot se ve correcto,
  • si no cubre botones CTA,
  • si la ventana abre correctamente,
  • si el texto se lee bien,
  • si cerrar es fácil,
  • si no bloquea formularios o booking.

Si el chatbot molesta en pantalla pequeña, hazlo más discreto.

Paso 8 — Revisa la apariencia desktop​

En desktop, el chatbot debe verse limpio sin llamar demasiado la atención.

Revisa:

  • posición,
  • tamaño,
  • colores,
  • espaciado,
  • si encaja con header y footer,
  • si no cubre secciones importantes.

Paso 9 — Prueba abrir y cerrar​

Antes de publicar, prueba la interacción básica.

Comprueba:

  • abrir el widget,
  • cerrar el widget,
  • scroll dentro de la conversación,
  • quick actions,
  • enviar una pregunta,
  • mostrar respuesta,
  • comportamiento en móvil.

La experiencia debe sentirse simple y natural.

Paso 10 — Guarda y publica​

Cuando estés satisfecho con la apariencia, guarda los cambios.

Después publica y revisa el sitio live, no solo el preview.

Buenas prácticas​

  • Mantén el widget discreto.
  • Usa colores con buen contraste.
  • No cubras botones importantes.
  • Revisa siempre móvil.
  • Mantén breve el mensaje de bienvenida.
  • Añade quick actions útiles.
  • No hagas el auto-open demasiado agresivo.
  • Prueba el sitio live después de publicar.

Video tutorial​

Video sugerido para este artículo:

Título: Cómo cambiar la apariencia del chatbot en Centuply

Duración: 3-5 minutos

Guion del video:

  1. Abrir Chatbot settings.
  2. Abrir Appearance.
  3. Cambiar posición del widget.
  4. Cambiar colores.
  5. Configurar mensaje de bienvenida.
  6. Añadir quick actions.
  7. Revisar móvil.
  8. Probar abrir y cerrar.
  9. Publicar.

Preguntas frecuentes​

¿Dónde debe aparecer el chatbot?​

Normalmente abajo a la derecha, salvo que cubra botones o contenido importante.

¿Debe abrirse automáticamente?​

No necesariamente. Si se abre automáticamente, debe hacerlo de forma discreta y no inmediatamente.

¿Qué color debo usar?​

Usa un color que encaje con tu marca y tenga buen contraste.

¿Qué debo escribir en el mensaje de bienvenida?​

Escribe algo breve y útil, como “¡Hola! ¿Cómo podemos ayudarte?”

¿Debo revisarlo en móvil?​

Sí. El chatbot puede cubrir elementos importantes en pantallas pequeñas, por eso la revisión móvil es esencial.