Personalizar Widget (Colores y Estilos)

Personalización Visual

El widget se puede personalizar completamente para que coincida con la apariencia de tu página web y tu marca.

Colores Principales

Color Primario

• Este es el color principal del widget
• Se usa en:
• Botones de acción (Reservar, Consultar)
• Enlaces destacados
• Elementos interactivos
• Ejemplo: Si tu web es azul, usa ese mismo azul

Color Secundario

• Color de acento para elementos secundarios
• Se usa en:
• Bordes y destacados
• Hover states
• Información adicional
• Ejemplo: Un tono más claro u oscuro del color primario

Color de Texto

• Color del texto principal
• Asegúrate de que tenga buen contraste con el fondo
• Recomendación: Negro (#000) o gris oscuro (#333) sobre fondo claro

Color de Fondo

• Fondo del widget
• Puede ser blanco, gris claro, o transparente
• Transparente: Se adapta al fondo de tu página

Tipografía

Fuente

• El widget usa las fuentes de tu página web por defecto
• Si tu página usa una fuente personalizada, el widget la heredará
• Asegúrate: Que la fuente sea legible

Tamaños de Texto

• El widget ajusta automáticamente los tamaños
• En móvil se adapta para mejor legibilidad
• Personalización: Puedes ajustar tamaños base si es necesario

Textos Personalizables

Texto del Botón Principal

• Por defecto: "Reservar Ahora"
• Personaliza: "Consultar Disponibilidad", "Ver Unidades", etc.
• Recomendación: Usa texto claro y accionable

Textos de Estado

• Disponible: "Disponible" o "Libre"
• Ocupado: "Ocupado" o "No disponible"
• Reservado: "Reservado" o "Próximamente disponible"

Mensajes

• Mensaje de bienvenida
• Texto de ayuda
• Mensajes de confirmación

Tema (Claro/Oscuro)

Tema Claro

• Fondo blanco o claro
• Texto oscuro
• Ideal para: Páginas con fondo claro

Tema Oscuro

• Fondo oscuro
• Texto claro
• Ideal para: Páginas con fondo oscuro o modo oscuro

Tema Automático

• El widget detecta automáticamente el tema de tu página
• Se adapta al modo claro/oscuro de tu sitio

Tamaño y Posición

Ancho

• Completo: Toma todo el ancho disponible
• Centrado: Ancho fijo, centrado
• Personalizado: Define un ancho específico

Posición

• Izquierda: Alineado a la izquierda
• Centro: Centrado en la página
• Derecha: Alineado a la derecha

Responsive

El widget es totalmente responsive:

• Se adapta a móviles automáticamente
• Ajusta tamaños en tablets
• Mantiene usabilidad en todos los tamaños

Vista Previa

Antes de publicar:

1. Usa la vista previa del widget
2. Revisa cómo se ve en diferentes dispositivos
3. Ajusta colores y textos
4. Cuando esté perfecto, copia el código

Aplicar Cambios

Después de personalizar:

1. Haz clic en "Generar Código"
2. El nuevo código incluye todas tus personalizaciones
3. Reemplaza el código anterior en tu página web
4. Los cambios se aplican inmediatamente