Configuración del diseño del asistente
La pestaña Diseño del chat te permite personalizar completamente la apariencia visual del widget de chat para garantizar que se integre perfectamente con la imagen de marca de tu tienda’s.
Identidad y posicionamiento básicos
Identidad: Puedes definir el “Nombre del asistente” (por ejemplo, “Asistente de IA”) que aparece en el encabezado y, opcionalmente, proporcionar una “URL del avatar del asistente” para mostrar un logotipo o imagen personalizada junto al nombre.
Posicionamiento: Usa el menú desplegable “Posición en pantalla” para elegir dónde se ancla el widget en tu tienda (normalmente abajo a la derecha).
Diseño y dimensiones
Tienes un control preciso sobre el tamaño físico y la forma de la interfaz del chat usando píxeles (px), altura de la ventana gráfica (vh) o unidades rem:
Ajusta el “Ancho del chat” general (por ejemplo, 400px) y la “Altura máxima del chat” (por ejemplo, 50vh).
Ajusta el espaciado con “Relleno de mensajes” y ajusta la curvatura de la interfaz usando controles de radio como “Radio del contenedor de mensajes” (18px) y “Radio de la ventana de chat” (12px).
Controla el tamaño de la tipografía con las opciones “Tamaño de fuente del chat”, “Tamaño del texto del encabezado del chat” y “Tamaño del icono del encabezado del chat”.
Temas de color
La interfaz proporciona amplios selectores de código hexadecimal para modificar cada elemento de la ventana de chat.
Fondos: Personaliza el “Fondo del chat” principal (#FFFFFF), el “Fondo de los mensajes del cliente” y el “Fondo de los mensajes del asistente” (#000000). También puedes matizar secciones específicas como el “Fondo del área de texto de bienvenida” o el “Color de fondo de las preguntas frecuentes” (#F9FAFB).
Bordes: Define los contornos sutiles para el campo de mensaje, los cuadros de preguntas frecuentes y los enlaces para crear una apariencia cohesiva.
Preguntas frecuentes
La pestaña de preguntas frecuentes te permite crear preguntas preescritas que aparecen antes de que el usuario escriba su primer mensaje. Esto ayuda a resolver consultas comunes al instante sin requerir generación por IA.
Haz clic en “+ Añadir FAQ” para crear una nueva entrada.
Para cada entrada, ingresa la “Pregunta” común (por ejemplo, “¿Puedes enviar el producto a EE. UU.?”) y formatea la “Respuesta” estática usando el editor de texto enriquecido (negrita, cursiva, subrayado, tachado).
Puedes arrastrar y soltar para reordenar las preguntas o usar los íconos de lápiz y papelera para editarlas o eliminarlas.
Enlaces rápidos
La pestaña Enlaces te permite añadir botones de navegación directa en la parte inferior de la pantalla de bienvenida del chat. Esto es ideal para dirigir a los usuarios a canales de soporte alternativos o a páginas importantes de la tienda.
Diseño de cuadrícula: Primero, define cómo se muestran los enlaces seleccionando el número de “Columnas de la cuadrícula” (por ejemplo, establecerlo en 3 los mostrará en una fila horizontal).
Añadir enlaces: Haz clic en “+ Añadir enlace” para crear un nuevo botón. Proporciona un “Título del enlace” (como “WhatsApp” o “Correo”) e introduce la “URL del enlace” exacta (usando formatos estándar como mailto: para correos electrónicos o números de teléfono directos).
Iconos: Puedes seleccionar de una biblioteca integrada de iconos vectoriales (como un sobre, teléfono, globo terráqueo o calendario) para representar el enlace visualmente. Alternativamente, puedes usar el botón “Elegir archivo” bajo “Imagen personalizada” para subir tu propio icono.
¿Listo para vender más en Shopify?
Instala Liliwi en tu tienda de Shopify y obtén una configuración gratuita de nuestro equipo.
Usa el servicio completo por tan solo $1.