Ritocchi per Booksy: un calendario più chiaro e una modalità focus
Booksy è un comodo strumento di prenotazione, ma il pannello aziendale può essere denso di elementi: promozioni, notifiche, suggerimenti, banner colorati. Quando gestisci un salone, vuoi soprattutto vedere il calendario e gli appuntamenti di oggi. Questa guida mostra come rimodellare booksy.com con JustZix in modo che il pannello e la vista calendario siano chiari e tranquilli — una manciata di regole CSS e JS appuntate al dominio.
Perché rimodellare Booksy
Il pannello di Booksy gestisce molti scenari contemporaneamente: prenotazioni, marketing, statistiche, notifiche. È un bene per la piattaforma, ma il lavoro quotidiano in salone di solito si riduce a una domanda: "chi viene oggi e a che ora". JustZix non cambia il funzionamento di Booksy — sovrappone le tue regole CSS e JS alla pagina ogni volta che la apri. Le regole valgono solo per te, solo su booksy.com, e le attivi con un solo clic.
Riordina l'interfaccia di prenotazione
Il pannello di Booksy spesso circonda il calendario con banner di marketing e riquadri di suggerimenti. La soluzione più semplice è una regola CSS confrontata con gli attributi dei contenitori:
/* Nascondi i banner di marketing e i riquadri di suggerimenti */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
display: none !important;
}Booksy rende alcuni blocchi solo dopo il caricamento dei dati, quindi conviene aggiungere una regola JS che ripulisce il pannello anche mentre vengono aggiunti contenuti:
// Rimuovi i blocchi promozionali, anche dopo il caricamento pigro
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 più denso
La vista calendario predefinita di Booksy lascia parecchio spazio vuoto nelle celle delle ore. Se hai molti appuntamenti al giorno, puoi ridurre l'altezza delle righe e la spaziatura per far stare un'intera giornata senza scorrere:
/* Calendario compatto — l'intera giornata sullo schermo */
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;
}Evidenzia gli appuntamenti di oggi e non confermati
Un'occhiata veloce alla pianificazione rende facile non notare gli appuntamenti in attesa di conferma. Invece di cercarli con gli occhi, evidenziali con un contorno colorato usando una regola JS:
// Evidenzia gli appuntamenti non confermati
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 più nettamente la colonna "oggi"
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';Ora puoi vedere a colpo d'occhio quali appuntamenti richiedono una risposta e dove si trova oggi nella pianificazione.
Nascondi le promozioni e le notifiche
La barra superiore di Booksy mostra spesso banner che offrono funzionalità premium e fumetti di notifiche di marketing. Se ti distraggono mentre lavori, puoi nasconderli del tutto:
/* Nascondi le notifiche di marketing e i badge premium */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
display: none !important;
}Una modalità focus per la vista cliente
Se prenoti un appuntamento come cliente, anche la pagina del salone può essere densa: caroselli di foto, sezioni di raccomandazione, pulsanti ripetuti. Una modalità focus lascia solo l'elenco dei servizi e il calendario degli orari disponibili:
/* Modalità focus — solo servizi e orari */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
display: none !important;
}
/* Porta in primo piano l'elenco dei servizi */
div[class*="services-list"] {
font-size: 15px !important;
line-height: 1.6 !important;
}Costruisci il tuo set
Tieni questi ritocchi come regole separate e nominate — "Booksy: pannello pulito", "Booksy: calendario denso", "Booksy: modalità focus" — ciascuna appuntata a booksy.com. Così in pochi secondi adatti la vista a qualunque cosa tu stia facendo.
Le regole pronte per Booksy sono nel catalogo — vedi gli esempi per booksy.com e copia ciò che ti serve. Installa JustZix e riordina il tuo pannello oggi stesso.
Valuta questo articolo
Nessuna valutazione — sii il primo.