Personaliza los colores de tu página de reserva con la identidad de tu marca

Aprende a definir el color principal de tu marca en WaclisCAL para que los botones, fechas seleccionadas, enlaces y destacados visuales de tu página pública reflejen la identidad visual de tu negocio cumpliendo normas de contraste y accesibilidad.

1. Qué permite hacer

La página pública de reservas es la carta de presentación de tus servicios. Un diseño visualmente alineado con los colores corporativos de tu empresa genera confianza inmediata en el cliente y refuerza la imagen profesional de tu marca.

Con el personalizador de colores de WaclisCAL puedes:

• Definir un Color de Marca (Brand Color) personalizado utilizando un selector visual o ingresando el código hexadecimal exacto de tu manual de marca (ejemplo: #0D9488 o #2563EB).
• Aplicar este color armónicamente en botones de acción principal, días seleccionados en el calendario mensual, bordes interactivos y estados activos.
• Contar con un motor automático de contraste que evalúa en tiempo real los estándares de accesibilidad web (WCAG AA). Si eliges un color demasiado claro, el sistema ajustará automáticamente el color del texto (de blanco a negro o a un tono oscuro) para que los botones sean siempre 100% legibles.
• Alternar entre modos de visualización claro y oscuro para adaptarte al tema del dispositivo del visitante.

2. Cuándo utilizarlo

Recomendamos configurar tu color corporativo en las siguientes situaciones:

• Configuración inicial de cuenta: Al dar de alta WaclisCAL para reemplazar el color predeterminado por el tono exacto de tu logotipo.
• Rediseño de marca: Cuando tu empresa actualiza su paleta de colores y necesitas reflejar la nueva identidad en todos los puntos de contacto con clientes.
• Incrustación en sitio web (Embed): Para que el calendario integrado en tu web de WordPress, Shopify o landing page combine a la perfección con el diseño del resto del sitio.

3. Antes de comenzar

Antes de ajustar los colores:

1. Tener a mano el código hexadecimal de tu color principal (ejemplo: #1E3A8A para azul marino o #10B981 para verde esmeralda).
2. Asegurarte de que el color elegido tenga un contraste adecuado con fondos claros y oscuros.
3. Permisos de Administrador en WaclisCAL.

4. Paso a paso

Paso 1: Accede a los ajustes de Apariencia

1. En la barra lateral principal de WaclisCAL, haz clic en Ajustes.
2. En el menú de opciones de configuración, haz clic en Apariencia y Marca (o en Ajustes > Perfil > Marca).
3. Verás la sección de personalización visual con una vista previa interactiva.

Paso 2: Selecciona o ingresa tu color de marca

1. Localiza el campo Color de Marca (Brand Color).
2. Puedes elegir tu color mediante dos métodos:

- Selector de color: Haz clic en el recuadro de color para abrir la paleta interactiva y mover el cursor hasta el tono deseado.

- Código Hexadecimal (Recomendado): Escribe o pega directamente el código #HEX de tu marca en el campo de texto.

Paso 3: Verifica la advertencia de contraste (WCAG)

1. WaclisCAL analizará automáticamente el ratio de contraste de tu color contra el texto blanco de los botones.
2. Si el color elegido es demasiado claro o fosforescente (como amarillo brillante o verde lima pálido), el sistema mostrará una advertencia sugiriendo oscurecer levemente el tono para garantizar la legibilidad en pantallas de teléfonos bajo la luz del sol.
3. El sistema cambiará automáticamente el color del texto a oscuro si es necesario para mantener la accesibilidad.

Paso 4: Previsualiza el resultado en vivo

1. En el panel derecho de vista previa, observa cómo lucen los botones, el selector de fechas y los enlaces con el nuevo color aplicado.
2. Alterna entre la vista de Modo Claro y Modo Oscuro para confirmar que el contraste funcione impecablemente en ambos esquemas de color.

Paso 5: Guarda la configuración

1. Haz clic en el botón superior derecho Guardar cambios.
2. La nueva paleta se aplicará de forma instantánea a todas tus páginas de reserva públicas, enlaces directos y calendarios incrustados.

5. Ejemplo de aplicación

Un estudio de diseño y branding corporativo utiliza como color distintivo el tono índigo (#4F46E5):

1. El administrador ingresa a WaclisCAL y pega #4F46E5 en el campo Brand Color.
2. El sistema valida un contraste óptimo de 4.8:1 contra texto blanco (aprobado WCAG AA).
3. Al ingresar un cliente a la página cal.waclis.com/estudio-creativo, los números de los días con turnos disponibles, el botón de confirmación "Agendar Cita" y los bordes destacados muestran el tono índigo exacto de la marca.
4. El cliente siente una experiencia de navegación continua y coherente con el sitio web principal de la agencia.

6. Qué verá la persona que reserva

El visitante percibe un entorno moderno, pulido y profesional:

• Los botones principales destacan con claridad sobre el fondo, invitando a la acción.
• Las fechas seleccionadas quedan resaltadas con un aro del color corporativo.
• Todo el proceso de reserva transmite solidez y respaldo de marca.

7. Qué sucede después

1. Aplicación universal: El color se actualiza automáticamente tanto en la página pública del profesional como en los widgets incrustados en páginas web externas mediante iframe o popup.
2. Sin caché pendiente: Los clientes que ingresen verán la nueva paleta de inmediato sin necesidad de recargar forzadamente el navegador.

8. Problemas frecuentes

El botón de confirmación se ve con texto poco legible

• Causa: Se seleccionó un color de marca muy claro (ejemplo: amarillo #FFFF00 o celeste pastel) y el navegador intenta forzar texto blanco.
• Solución: Utiliza un tono de saturación media o profunda (ejemplo: en lugar de amarillo pastel, utiliza un tono ámbar #D97706 o mostaza #B45309). Consulta la guía Solución: Error al guardar cambios en un Tipo de Evento por bajo contraste de color.

El color no se actualiza en un sitio web externo incrustado

• Causa: El código de incrustación (embed) en la web externa tiene un parámetro de color fijo sobreescrito en el script o la página web almacena caché en un plugin de optimización.
• Solución: Borra la caché de tu gestor de contenidos (WordPress, Shopify) o actualiza el código embed desde el editor de WaclisCAL.

9. Buenas prácticas

• Elige colores con ratio de contraste mayor a 4.5:1: Garantiza que personas con dificultades visuales o clientes que reservan en exteriores con brillo solar lean los botones sin esfuerzo.
• Mantén coherencia con tu logotipo: Utiliza el color dominante de tu isotipo o el color de tus botones principales en tu web corporativa.
• Revisa la vista en modo oscuro: Muchos usuarios navegan con modo oscuro activo en sus smartphones; confirma que tu color se distinga con elegancia sobre fondos grises o negros.

10. Artículos relacionados

• Cómo ve tu cliente la página de reservas y cómo reservar en 3 simples pasos
• Inserta tu calendario de reservas dentro de tu sitio web (WordPress, Shopify o HTML)
• Solución: Error al guardar cambios en un Tipo de Evento por bajo contraste de color