Personalizar la interfaz de chat
La interfaz de chat controla la presentación visual y textual dentro de la experiencia del cliente, mientras que el punto de entrada controla cómo los compradores la descubren en distintas páginas y dispositivos. Amba...
La interfaz de chat controla la presentación visual y textual dentro de la experiencia del cliente, mientras que el punto de entrada controla cómo los compradores la descubren en distintas páginas y dispositivos. Ambas áreas proporcionan vistas previas, pero la validación final debe hacerse en la tienda real.
Esta guía cubre los controles actuales de avatar, color, forma, texto opcional, carrito, icono, punto de entrada y reglas de página, sin asumir que todas las empresas o integraciones exponen opciones idénticas.
Cómo encaja esto en Humind
AI Agent es el espacio de configuración para el asistente orientado al cliente. Knowledge y Catalog aportan los hechos, Guidance da forma al comportamiento de las respuestas, Tools añade acciones, Escalation define la asistencia humana, y las superficies de prueba le permiten revisar el resultado antes del despliegue.
Los cambios pueden afectar a muchas conversaciones, así que pruebe escenarios representativos de compra y soporte después de cada actualización importante. Un chat visualmente correcto no es suficiente: verifique conjuntamente la respuesta, el contexto del producto, la acción disponible y el comportamiento de transferencia.
Antes de empezar
Acceso: se requiere acceso de escritura a la configuración de Agent. Algunos ajustes avanzados están restringidos a los administradores de Humind, y los controles específicos de Shopify aparecen solo para las empresas de Shopify conectadas.
- Prepare los recursos aprobados de logotipo o avatar y los colores de marca.
- Compruebe el contraste de color y las limitaciones de la tienda móvil antes de elegir valores.
- Enumere los tipos de página en los que el iniciador debe estar visible, oculto o personalizado.
Flujo de trabajo paso a paso
Establecer la base visual
Abra AI Agent y, a continuación, Interfaz de chat. Elija un avatar de la galería o cargue el recurso previsto. Configure los colores de la interfaz y del texto, la redondez de la burbuja, los colores de fondo y de texto de añadir al carrito, y la redondez de los botones.
Use la vista previa mientras edita y verifique un contraste legible en cada componente coloreado. Los ajustes de esta página se guardan en vivo, así que espere la confirmación de guardado y evite cambios contradictorios rápidos.
Revisar las opciones avanzadas de presentación
La interfaz actual puede usar opcionalmente un nombre de Agent personalizado, un título de inicio y un saludo de inicio. Puede mostrar u ocultar el icono de destello, la imagen del buscador de regalos, las preguntas predefinidas y el botón de añadir al carrito. Las empresas de Shopify pueden elegir si la acción del carrito va al carrito o al pago mediante el control de destino disponible.
Un valor de inicio personalizado vacío puede ocultar intencionadamente esa línea. Registre esta decisión para que un resultado en blanco no se confunda más adelante con contenido perdido.
Configurar el punto de entrada predeterminado
Abra Widgets de IA y, a continuación, Punto de entrada. Active el iniciador predeterminado y elija su tipo, posición, etiqueta, visibilidad del avatar, tamaño de la burbuja, tratamiento del logotipo y desplazamientos horizontales o verticales cuando estén disponibles. Cambie entre escritorio y móvil para revisar ambas configuraciones.
Mantenga el iniciador localizable sin cubrir la navegación de la tienda, los controles de consentimiento, las acciones de compra de productos o los widgets de accesibilidad.
Añadir reglas específicas de página solo cuando sea necesario
Las reglas de página pueden dirigirse a tipos de página compatibles y establecer la visibilidad en móvil o escritorio como oculto, heredado o personalizado. Las reglas personalizadas pueden cambiar la presentación del iniciador para el contexto de página seleccionado. Las reglas de página de producto también pueden exponer la opción automática actual de pregunta sobre el producto.
Evite reglas superpuestas. Use las pestañas de contexto de vista previa para comparar los resultados predeterminados y los específicos de página, y elimine las reglas obsoletas en lugar de acumular excepciones indefinidamente.
Validar la accesibilidad y el diseño en vivo
Pruebe el acceso por teclado, el contraste del texto, la apertura y el cierre, el texto traducido largo, las pantallas estrechas, las páginas de producto y el comportamiento del carrito en la vista previa. Después, despliegue y repita las comprobaciones en la tienda real en un navegador privado.
Si el resultado en vivo es distinto, investigue la instalación, los recursos obsoletos de la tienda, el contexto de la empresa y la coincidencia de las reglas de página antes de volver a cambiar el diseño.
Permisos y advertencias importantes
- La vista previa no incluye todos los temas de tienda, superposiciones o interacciones adaptativas.
- Las opciones avanzadas y específicas de Shopify son condicionales, documente solo los controles visibles para la empresa activa.
- Los ajustes con guardado en vivo pueden afectar a las pruebas inmediatamente después de persistirse.
- Las reglas de página deben seguir siendo coherentes y fáciles de interpretar entre escritorio y móvil.
Verificar el resultado
Use esta lista de comprobación antes de considerar el trabajo terminado:
- El avatar, el texto, la interfaz y los colores del carrito cumplen el estándar de contraste del equipo.
- Las vistas previas del punto de entrada predeterminado y específico de página coinciden con el conjunto de reglas documentado.
- Las etiquetas largas, las traducciones, el foco del teclado y los diseños móviles siguen siendo utilizables.
- La tienda en vivo muestra un único iniciador correcto sin cubrir controles críticos.
Solución de problemas
Un cambio visual no aparece
Espere la confirmación de guardado de la página, confirme la empresa activa, actualice la vista previa y pruebe una sesión nueva de la tienda. Compruebe si una regla específica de página anula la predeterminada.
El iniciador aparece en el lugar equivocado
Revise la selección de dispositivo, la posición, los desplazamientos y la regla de página correspondiente. Confirme que otra instalación duplicada del widget no esté creando la instancia inesperada.
El texto o los botones son difíciles de leer
Revise de nuevo tanto los colores de fondo como los de texto para los controles de la interfaz y del carrito. Pruebe etiquetas reales y texto traducido en tamaños de escritorio y móvil antes de publicar el diseño corregido.