Adaptarlo a tu marca: colores, tipografías y formas

El widget tiene seis ajustes. Esa es la lista entera, y es corta a propósito: seis controles que no pueden pelearse entre sí valen más que cuarenta que sí. Todo lo demás — bordes, texto atenuado, estado al pasar el ratón, barra de progreso — se deduce de esos seis para que el resultado siga siendo legible elijas lo que elijas.

Los tienes en Marca, dentro de Widget para tu web, con una vista previa al lado. La vista previa es el widget real, no una maqueta: lo que ves es exactamente lo que verán tus clientes.

Los seis

Acertar con los colores

Saca Fondo y Texto de tu web, no de tu logo. El widget debe fundirse con la página en la que está, y la página es lo que lo rodea.

Saca el Color de marca de tu logo o de tus botones actuales. Este sí puede destacar: es lo que el cliente va a pulsar.

El resto se deduce. Los bordes son tu color de texto muy suavizado sobre tu fondo; el texto atenuado es la misma idea un poco más allá. Por eso no puedes fijarlos: se calculan para seguir siendo legibles con el par que hayas elegido, y fijarlos a mano es como acaban los widgets con separadores invisibles.

El rojo de error no es tuyo. Cuando algo falla, el widget usa su propio rojo, porque un cliente necesita reconocer un problema como un problema incluso en una web cuyo color de marca también es rojo.

Apariencia: por qué dos colores cubren los dos modos

Pon Apariencia en Según el dispositivo del visitante y tu fondo y tu texto se intercambian en modo oscuro. Un fondo gris oscuro con texto casi blanco pasa a ser texto casi blanco sobre gris oscuro, que es lo que habrías elegido igualmente.

Por eso no hay una paleta oscura aparte que rellenar. Un par cubre los dos.

Si tu web no tiene modo oscuro propio, elige Claro y listo. Un widget en modo oscuro sobre una página siempre blanca parece un agujero.

Redondeo de esquinas

Cópialo de los botones de tu web. Si tus botones son rectos, ponlo casi a cero; si son de píldora, súbelo. Es el ajuste que la gente se salta y luego no sabe explicar por qué el widget parece pegado con cola: un redondeo distinto es la pista más visible que hay.

Tipografías

Elige de la lista en vez de escribir un nombre. Todas las opciones se sirven desde tu propia página, así que no hay peticiones a terceros desde el navegador de tu cliente ni fuentes que no lleguen a cargar con mala conexión.

Si tu web usa una tipografía que no está en la lista, elige la más parecida y no le des más vueltas. Predeterminada del sistema es una respuesta genuinamente buena: se muestra con la fuente que el dispositivo usa en todo lo demás, que en un móvil es invisible en el mejor sentido.

Lo que no puedes hacer, y por qué

• No puedes escribir CSS. Nada de lo que pegues en tu web puede reestilizar el interior del widget. Eso es lo que evita que una hoja de estilos rota en tu página deje ilegible el saldo de un cliente.
• No puedes meter un logo dentro del widget. El tuyo ya está encima, en tu propia página, y un segundo es ruido.
• No puedes ocultar el saldo ni la lista de recompensas en el formato Completo. Eso es el widget.

Una comprobación rápida antes de publicar

Abre tu página en un móvil, a ser posible con luz de día, y responde a tres preguntas: ¿se lee el saldo sin acercarse?, ¿el botón parece un botón?, ¿el recuadro parece de la misma página que lo rodea? Si las tres son que sí, ya está: esta no es una pantalla en la que nadie deba pasar la tarde.