Ajustements Booksy : un calendrier plus clair et un mode focus
Booksy est un outil de réservation pratique, mais le tableau de bord professionnel peut être dense en éléments : promotions, notifications, suggestions, bannières colorées. Quand vous gérez un salon, vous voulez surtout voir le calendrier et les rendez-vous du jour. Ce guide montre comment remodeler booksy.com avec JustZix pour que le tableau de bord et la vue calendrier soient clairs et calmes — une poignée de règles CSS et JS épinglées au domaine.
Pourquoi remodeler Booksy
Le tableau de bord Booksy gère de nombreux scénarios à la fois : réservations, marketing, statistiques, notifications. C'est bon pour la plateforme, mais le travail quotidien d'un salon se résume généralement à une seule question : « qui vient aujourd'hui et à quelle heure ». JustZix ne change pas le fonctionnement de Booksy — il superpose vos règles CSS et JS sur la page chaque fois que vous l'ouvrez. Les règles ne s'appliquent qu'à vous, uniquement sur booksy.com, et vous les basculez d'un seul clic.
Désencombrer l'interface de réservation
Le panneau Booksy entoure souvent le calendrier de bannières marketing et de tuiles de suggestions. La correction la plus simple est une règle CSS ciblée sur les attributs des conteneurs :
/* Masquer les bannières marketing et les tuiles de suggestions */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
display: none !important;
}Booksy n'affiche certains blocs qu'après le chargement des données, donc il vaut la peine d'ajouter une règle JS qui nettoie aussi le panneau à mesure que le contenu est ajouté :
// Retirer les blocs promo, y compris après le chargement paresseux
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 calendrier plus dense
La vue calendrier par défaut de Booksy laisse beaucoup d'espace vide dans les cellules horaires. Si vous avez beaucoup de rendez-vous par jour, vous pouvez réduire la hauteur des lignes et l'espacement pour faire tenir une journée entière sans défilement :
/* Calendrier compact — toute la journée à l'écran */
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;
}Mettre en évidence aujourd'hui et les rendez-vous non confirmés
Un coup d'œil rapide au planning fait facilement manquer les rendez-vous en attente de confirmation. Au lieu de les chercher, mettez-les en évidence avec un contour coloré grâce à une règle JS :
// Mettre en évidence les rendez-vous non confirmés
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';
}
});
// Marquer plus fortement la colonne « aujourd'hui »
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';Vous pouvez maintenant voir d'un coup d'œil quels rendez-vous nécessitent une réponse et où se situe aujourd'hui dans le planning.
Masquer les promotions et les notifications
La barre supérieure de Booksy affiche souvent des bannières proposant des fonctionnalités premium et des bulles de notification marketing. Si elles vous distraient pendant le travail, vous pouvez les masquer entièrement :
/* Masquer les notifications marketing et les badges premium */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
display: none !important;
}Un mode focus pour la vue client
Si vous réservez un rendez-vous en tant que client, la page du salon peut aussi être dense : carrousels de photos, sections de recommandations, boutons répétés. Un mode focus ne laisse que la liste des services et le calendrier des créneaux disponibles :
/* Mode focus — juste les services et les créneaux */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
display: none !important;
}
/* Mettre en avant la liste des services */
div[class*="services-list"] {
font-size: 15px !important;
line-height: 1.6 !important;
}Construisez votre propre ensemble
Gardez ces ajustements comme des règles distinctes et nommées — « Booksy : panneau propre », « Booksy : calendrier dense », « Booksy : mode focus » — chacune épinglée à booksy.com. Ensuite, en quelques secondes vous adaptez la vue à ce que vous faites.
Des règles prêtes à l'emploi pour Booksy sont dans le catalogue — voyez les exemples pour booksy.com et copiez ce qui convient. Installez JustZix et rangez votre tableau de bord dès aujourd'hui.
Notez cet article
Aucune note — soyez le premier.