Cómo personalizar la apariencia de tu chatbot

Shoply AI Chat y AI Search ofrecen más de 40 opciones para personalizar la apariencia de la aplicación.

Esta sección te guía por las distintas opciones de personalización disponibles para tu AI Chatbot. Puedes personalizar su apariencia, el diseño de la ventana de chat y la experiencia de mensajería para que coincidan con tu marca.

¿Listo para comenzar? Abre Customize AI Chat en tu Shoply AI Admin Console, ya sea que uses Shopify u otra plataforma de sitio web. Si el chatbot aún no es visible, sigue la lista de verificación de instalación y visibilidad.

Vista previa de tu ventana de chat

Prueba el mismo tema y las ilustraciones con ancho de escritorio que se usan en el panel de administración. Elige una apariencia clara u oscura y compara cuánto espacio ocupa la ventana de chat.

Para cambiar cómo habla la IA en lugar de cómo se ve, consulta cómo personalizar la personalidad de tu IA.

Elección del ícono de chat

Select an icon

Puedes elegir un ícono de chat entre nuestros 17 íconos predefinidos diferentes, o subir una imagen como tu propio ícono de chat.

Color y tamaño del ícono de chat

Primary Color

Este es el color principal del tema, y también se usa como color de texto resaltado en la ventana de chat.

Si usas un modo claro en tu sitio web, selecciona un color que no sea blanco como color del tema; esto es para asegurarnos de que el texto resaltado siga siendo legible con el fondo claro. Si usas un modo oscuro en tu sitio web, selecciona un color que no sea negro como color del tema.

Complementary Color

Este es un color complementario que funciona con tu color principal para crear degradados (transición suave entre dos colores) para el ícono de chat y el encabezado de la ventana de chat, haciendo que el ícono de chat sea más atractivo visualmente y esté alineado con tu marca.

Icon’s Line Color

Este es el color del contorno del ícono de chat.

Whether to remove the background color of the chat icon.

Esto suele ser útil si subes una imagen como ícono de chat y quieres eliminar el color de fondo (el color principal) del ícono de chat.

Whether to remove the shadow of the chat icon.

Esta opción te permite eliminar el efecto de sombra del ícono de chat para lograr un diseño más plano y minimalista. Esto es particularmente útil si tu tienda tiene una estética limpia y moderna, o si has subido un ícono personalizado que ya incluye sus propios efectos de sombra o profundidad.

Floating Icon Size for desktop and mobile.

En dispositivos móviles, quizá quieras establecer un tamaño más pequeño para el ícono de chat para evitar bloquear la vista del cliente en la pantalla móvil.

Posicionamiento del ícono de chat

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Usa un valor más alto si quieres que el ícono permanezca delante de otros elementos de la interfaz.

Auto-hide chat icon on mobile

Oculta el ícono de chat después de un número específico de segundos en dispositivos móviles.

Esta opción solo está disponible para dispositivos móviles. Ayuda a evitar que el ícono de chat bloquee la vista del cliente en la pantalla móvil.

Personalización de la ventana de chat

Cuando haces clic en el ícono de chat de Shoply AI, aparece la ventana de chat. Los clientes pueden interactuar con Shoply AI a través de esa ventana de chat.

Esta sección te guiará por las distintas opciones disponibles para personalizar la ventana de chat.

Color Theme (dark mode or light mode) of the chat window

Si eliges el modo oscuro, el fondo de la ventana de chat será negro y el color de la fuente será blanco. Recomendamos adoptar la opción de modo oscuro si el tema de tu tienda también está en modo oscuro.

Width of the chat window on desktop

Esta opción solo se aplica a escritorio. En dispositivos móviles, la ventana de chat siempre ocupa toda la pantalla.

Select the branding image and background image

Puedes elegir subir tu propia imagen de marca y la imagen de fondo para la ventana de chat, o simplemente dejar que Shoply AI genere esas imágenes por ti.

Si eliges usar la imagen generada por IA, Shoply AI generará las imágenes de marca y las imágenes de fondo según la descripción de tu tienda.

Adjust the transparency and aspect ratios of the background image for the chat window.

Las imágenes de fondo en la ventana de chat pueden hacer que el texto que está encima sea ilegible. Por lo tanto, de forma predeterminada, añadimos una capa semitransparente sobre la imagen de fondo.

Whether to remove Shoply AI’s Logo in Input Bar

Esta opción te permite eliminar el logotipo de Shoply AI de la barra de entrada del chat para una experiencia más limpia y más alineada con tu marca. Esto es particularmente útil si quieres mantener una identidad de marca coherente en toda tu tienda sin logotipos de terceros, o si prefieres un diseño de interfaz de chat más minimalista.

Esta opción solo está disponible en planes de pago.

Mensajes predefinidos para AI Chat

También puedes configurar o editar los mensajes predeterminados que guían a los clientes cuando interactúan por primera vez con tu chatbot. Además, puedes configurar las opciones de traducción para esos mensajes (consulta esta página de preguntas frecuentes para más detalles).

Popup Welcome message (shows above chat icon if not empty)

Si dejas vacío el mensaje de bienvenida, no mostraremos el mensaje de bienvenida sobre el ícono de chat.

Pre-defined messages in chat window

Puedes configurar hasta 3 tipos de mensajes predefinidos en la ventana de chat:

1. Primer mensaje en la ventana de chat - Este es el mensaje de saludo inicial que aparece automáticamente cuando los clientes abren la ventana de chat por primera vez. Úsalo para dar la bienvenida a los clientes y marcar el tono de la conversación.

2. Hasta 4 preguntas iniciales - Estas son sugerencias de preguntas en las que se puede hacer clic y que se muestran al comienzo del chat. Ayudan a orientar a los clientes proporcionando preguntas comunes en las que pueden hacer clic para iniciar una conversación, lo que facilita que los clientes comiencen.

3. Mensaje de marcador de posición del campo de entrada - Este es el texto de ayuda que aparece en el campo de entrada del chat antes de que los clientes comiencen a escribir. Ofrece orientación sobre lo que los clientes pueden preguntar, como “Pregúntame cualquier cosa 🤗” o “¿Cómo puedo ayudarte hoy?”

Estas configuraciones controlan la apertura estándar del chat. Cuando un comprador abre el chat a través de un enlace de “Question About This Product?”, Shoply muestra en su lugar el nombre del producto, un breve destaque del producto y preguntas generadas automáticamente sobre ese artículo. No necesitas escribir preguntas iniciales para cada producto. Aprende cómo funcionan las preguntas sobre productos impulsadas por IA, o sigue los pasos para añadir un botón de pregunta sobre producto.

Consulta el ejemplo de cada tipo de mensaje predefinido: