Ajustes de Booksy: un calendario más claro y un modo enfoque
Booksy es una herramienta de reservas práctica, pero el panel de negocio puede ser denso en elementos: promociones, notificaciones, sugerencias, banners coloridos. Cuando llevas un salón, quieres ver sobre todo el calendario y las citas de hoy. Esta guía muestra cómo remodelar booksy.com con JustZix para que el panel y la vista de calendario sean claros y tranquilos — un puñado de reglas CSS y JS fijadas al dominio.
Por qué remodelar Booksy
El panel de Booksy gestiona muchos escenarios a la vez: reservas, marketing, estadísticas, notificaciones. Eso es bueno para la plataforma, pero el trabajo diario del salón suele reducirse a una pregunta: "quién viene hoy y a qué hora". JustZix no cambia cómo funciona Booksy — superpone tus reglas CSS y JS en la página cada vez que la abres. Las reglas se aplican solo a ti, solo en booksy.com, y las alternas con un solo clic.
Despeja la interfaz de reservas
El panel de Booksy a menudo rodea el calendario de banners de marketing y mosaicos de sugerencias. La solución más simple es una regla CSS emparejada contra los atributos de los contenedores:
/* Oculta los banners de marketing y mosaicos de sugerencias */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
display: none !important;
}Booksy muestra algunos bloques solo después de que se cargan los datos, así que vale la pena añadir una regla JS que también limpie el panel a medida que se añade contenido:
// Quita los bloques promocionales, incluso tras la carga diferida
function cleanBooksy() {
document.querySelectorAll('[data-testid], [class]').forEach(el => {
const id = (el.getAttribute('data-testid') || '') + ' ' + el.className;
if (/promo|marketing|upsell|cross-sell/i.test(id)) {
el.style.display = 'none';
}
});
}
cleanBooksy();
new MutationObserver(cleanBooksy).observe(document.body, {
childList: true, subtree: true,
});Un calendario más denso
La vista de calendario por defecto de Booksy deja bastante espacio vacío en las celdas de hora. Si tienes muchas citas al día, puedes reducir la altura de las filas y el espaciado para que quepa un día entero sin desplazar:
/* Calendario compacto — el día entero en pantalla */
div[class*="calendar-row"],
div[class*="TimeSlot"] {
min-height: 28px !important;
padding: 2px 6px !important;
}
div[class*="appointment-card"] {
font-size: 12px !important;
line-height: 1.3 !important;
}Resalta las citas de hoy y sin confirmar
Un vistazo rápido a la agenda hace fácil pasar por alto las citas que esperan confirmación. En lugar de buscarlas con la vista, resáltalas con un contorno de color usando una regla JS:
// Resalta las citas sin confirmar
document.querySelectorAll('div[class*="appointment-card"]').forEach(card => {
const status = (card.getAttribute('data-status') || '').toLowerCase();
const txt = (card.textContent || '').toLowerCase();
if (status.includes('pending') || txt.includes('unconfirmed')) {
card.style.outline = '2px solid #e65100';
card.style.borderRadius = '6px';
}
});
// Marca con más fuerza la columna "hoy"
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';Ahora puedes ver de un vistazo qué citas necesitan una respuesta y dónde está hoy en la agenda.
Oculta las promos y notificaciones
La barra superior de Booksy a menudo muestra banners que ofrecen funciones premium y burbujas de notificación de marketing. Si te distraen mientras trabajas, puedes ocultarlas del todo:
/* Oculta las notificaciones de marketing y las insignias premium */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
display: none !important;
}Un modo enfoque para la vista de cliente
Si reservas una cita como cliente, la página del salón también puede ser densa: carruseles de fotos, secciones de recomendaciones, botones repetidos. Un modo enfoque deja solo la lista de servicios y el calendario de horarios disponibles:
/* Modo enfoque — solo servicios y horarios */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
display: none !important;
}
/* Pon la lista de servicios en primer plano */
div[class*="services-list"] {
font-size: 15px !important;
line-height: 1.6 !important;
}Monta tu propio conjunto
Mantén estos ajustes como reglas separadas y con nombre — "Booksy: panel limpio", "Booksy: calendario denso", "Booksy: modo enfoque" — cada una fijada a booksy.com. Entonces, en unos segundos, adaptas la vista a lo que estés haciendo.
Las reglas ya hechas para Booksy están en el catálogo — mira los ejemplos para booksy.com y copia lo que encaje. Instala JustZix y ordena tu panel hoy.
Valora este artículo
Sin valoraciones — sé el primero.