Una notificación de compra debería parecer hecha por tu sitio, no como si un tercero hubiera alquilado una esquina de la pantalla. Provedly incluye cinco temas, y elegir bien se reduce sobre todo a dos preguntas: ¿tu página es clara u oscura? ¿y tu marca es discreta o llamativa? En este artículo repasamos cada tema, los ajustes que lo rodean y los errores que hacen que una notificación parezca pegada con cinta.
Los cinco temas
| Tema | Carácter | Encaja con |
|---|---|---|
| Clean white | Tarjeta clara, texto neutro | La mayoría de los sitios claros, SaaS, páginas con mucha documentación |
| Deep ocean | Superficie azul oscuro | Marcas oscuras o con azul marino, fintech, herramientas para desarrolladores |
| Midnight | Superficie casi negra | Sitios en modo oscuro, fotografía, productos premium |
| Electric violet | Acento saturado | Marcas con una identidad morada o de degradado muy marcada |
| Sunset blaze | Acento cálido y enérgico | Marcas de consumo, lanzamientos, comida y eventos |
Como el widget se muestra en un Shadow DOM, el tema es exactamente lo que obtienes. El CSS de tu sitio no puede cambiarle el estilo, y sus estilos no pueden salirse. Eso elimina el problema de "en el sitio en producción se veía distinto", pero también significa que la elección del tema es toda la decisión de diseño; elige con intención.
Combina con la superficie, no con el logo
El error más habitual es combinar la notificación con el color del logo. Un logo violeta sobre una página blanca no significa que Electric violet sea el adecuado; la notificación se apoya en la página, no en el logo. Combina con la superficie sobre la que va a aparecer. Si tus páginas son blancas o gris claro, Clean white parecerá propio. Si tus páginas son oscuras, Midnight o Deep ocean.
Usa los temas de acento cuando la propia marca tenga mucho contraste en todas partes. Una notificación color atardecer en una página blanca y sobria lleva la mirada a la esquina cada vez que aparece, y eso cansa a la tercera notificación. Recuerda que los visitantes ven hasta 5 por sesión por defecto.
Los ajustes alrededor del tema
Posición
Abajo a la izquierda es la convención que la mayoría de los visitantes ha aprendido a leer como "actividad, no alerta". Abajo a la derecha compite con los widgets de chat y los banners de cookies. Las posiciones superiores compiten con tu navegación y con las barras CTA. Comprueba la posición frente a todo lo que tengas fijo en la página, sobre todo en móvil, donde una notificación y un botón fijo de añadir al carrito pueden solaparse. La segmentación por dispositivo te permite mostrar notificaciones solo en escritorio si el móvil está saturado.
Estilo de avatar
Un avatar le da a la vista un punto donde posarse. Provedly admite un avatar con imagen alimentado por el campo avatar_url de los registros de la API y de CSV; los registros de webhook de Stripe y Shopify no incluyen fotos, así que la mayoría de los widgets usa un estilo sin foto. No uses caras de bancos de imágenes para rellenar el hueco. Una notificación sobre "Sarah M. en Austin" con la foto de una modelo es un detalle inventado encima de una compra real, y es justo el tipo de cosa que la página de verificación existe para evitar.
Formatos de nombre y ubicación
El tema define el aspecto; los formatos definen el tono. Los valores por defecto son nombre más inicial ("Sarah M.") y ciudad más país ("Austin, US"). Los nombres completos resultan invasivos y suelen ser un error de privacidad; solo iniciales ("S. M.") parece que esconde algo. Ciudad y país es lo bastante concreto para ser creíble sin señalar una calle. En un negocio local donde el nombre de la ciudad identifica a una comunidad pequeña, "country" o "none" es más considerado. Consulta Formatos de nombre y ubicación: privacidad por defecto.
El ritmo también es diseño
La elección del tema es visual, pero el ritmo es lo que la gente realmente nota. Los valores por defecto son un retraso inicial de 3 segundos, 6 segundos en pantalla, un intervalo de 30 segundos y 5 por sesión. En una landing larga, un intervalo mayor da más calma. En una cuadrícula de productos que la gente recorre rápido, el valor por defecto está bien. Pongas lo que pongas, mantenlo igual en todas las páginas; una notificación que salta de inmediato en una página y a los diez segundos en otra parece aleatoria.
La insignia
El plan Free muestra una pequeña insignia "by Provedly" en la notificación. A partir de Starter, la insignia es opcional. En cualquier caso, cada notificación enlaza a la página de verificación pública, que muestra las fuentes, los conteos y la última compra verificada. Aunque ocultes la insignia, mantén el enlace accesible; es lo que separa una notificación verificable de un adorno.
Una forma rápida de decidir
- Página clara, marca discreta: Clean white.
- Página oscura: Midnight para un negro neutro, Deep ocean si tira a azul.
- Marca construida sobre un acento llamativo que se usa en todas partes: Electric violet o Sunset blaze.
- Si dudas: Clean white, abajo a la izquierda, valores por defecto. Después, cambia una cosa cada vez.
Previsualiza cada tema en una página real y no solo en el panel. Abre tu sitio con el widget instalado, cambia de tema y recarga. La diferencia entre "esto es nuestro" y "esto es un anuncio" salta a la vista en dos notificaciones.
Preguntas frecuentes
¿Puedo personalizar los colores más allá de los cinco temas?
Los temas son conjuntos fijos, elegidos para que la notificación siga siendo legible y coherente en cualquier sitio. Las barras ofrecen más control del color, incluidos el fondo y el texto del botón, porque son superficies más grandes.
¿El tema afecta al contador en vivo?
El contador en vivo usa el mismo tema para que ambos elementos se lean como un solo sistema. Además, se oculta por debajo de tu mínimo en lugar de mostrar un número pequeño y poco convincente.
¿Los temas se ven distintos en Shopify?
No. El app embed de Shopify usa el mismo renderizador y el mismo aislamiento con Shadow DOM, así que un tema se ve igual en Shopify que en un sitio estático.
Prueba los cinco en tu propia página en pocos minutos: empieza gratis.