Passer au contenu principal

Comment afficher un calendrier de disponibilités sur mon site web ?

Cet article explique comment configurer et intégrer le calendrier NeoVenue des dates de réservation libres sur votre site : activation, sites autorisés, salles affichées, personnalisation du style et code HTML à coller.

À quoi sert le calendrier de disponibilités ?

Le calendrier de disponibilités est un bloc à intégrer sur votre site web (page vitrine, CMS, WordPress, etc.). Il affiche un calendrier mensuel des dates encore libres ou réservées pour vos salles, synchronisé en temps réel avec vos réservations NeoVenue.

Important : ce calendrier est informatif uniquement. Il ne permet pas au visiteur de réserver directement depuis votre site. Vous pouvez toutefois ajouter un bouton d’action (par ex. « Demander un devis ») qui renvoie vers une page de votre choix.

Les dates affichées comme réservées correspondent aux contrats actifs dans NeoVenue (acompte en attente, acompte versé, soldé, signé ou envoyé). Les contrats annulés ne bloquent pas une date.

Où configurer le calendrier ?

  1. Connectez-vous à NeoVenue avec un compte ayant les droits sur les paramètres.

  2. Allez dans Paramètres.

  3. Ouvrez Widget et extension.

  4. Cliquez sur l’onglet Calendrier disponibilités.

Lien direct : Paramètres → Widget et extension → Calendrier disponibilités

Étape 1 — Activer le calendrier et autoriser votre site

Activer le calendrier

  1. Cochez Calendrier activé.

  2. Tant que le calendrier n’est pas activé, le code d’intégration ne s’affichera pas sur votre site.

Sites autorisés

Pour des raisons de sécurité, seules les pages dont le domaine (et éventuellement le chemin) figure dans la liste Sites autorisés peuvent charger le calendrier.

  1. Dans Sites autorisés, renseignez l’origine (domaine) de votre site, par ex. monsite.fr ou www.monsite.fr.

  2. Le chemin est optionnel : utilisez-le pour limiter l’affichage à une page précise (ex. /disponibilites).

  3. Cliquez sur Ajouter un site si vous devez autoriser plusieurs domaines ou chemins.

  4. Enregistrez la configuration.

Étape 2 — Choisir les salles affichées

Dans la section Salles affichées :

  • Par défaut, toutes vos salles sont incluses.

  • Décochez une salle pour l’exclure du calendrier.

  • Vous devez avoir au moins une salle créée dans Paramètres → Salles.

Étape 3 — Personnaliser l’affichage

Dans Affichage du calendrier, vous pouvez ajuster :

Option

Description

Mode d’affichage

Combiné : un seul calendrier avec pastilles par salle. Séparé : un calendrier par salle.

Horizon (mois)

Nombre de mois futurs consultables (1 à 24).

Titre / Description

Textes affichés au-dessus du calendrier sur votre site.

Langue du calendrier

Français, anglais ou hébreu (libellés des jours, légende, navigation).

Permettre au visiteur de filtrer les salles

Affiche un sélecteur pour masquer/afficher certaines salles (mode combiné).

Mode combiné : règle « toutes les salles libres »

En mode Combiné, une date apparaît comme disponible uniquement si toutes les salles sélectionnées sont libres ce jour-là. Si une seule salle est réservée, le jour est marqué comme occupé.

Règle « fin de nuit »

Les réservations qui se terminent avant 6 h du matin le lendemain (heure locale de la salle) ne bloquent pas la journée suivante. Exemple : une fête de 20 h à 2 h du matin n’empêche pas de considérer le lendemain comme disponible.

Étape 4 — Choisir le style

Dans Style, sélectionnez un preset :

  • Brut

  • Élégant / haut de gamme

  • Moderne (par défaut)

  • Nature / chaleureux

  • Personnaliser : saisissez du CSS ciblant #neovenue-booking-availability ou les classes .nv-ba-*.

Utilisez Aperçu pour visualiser le rendu avec vos vraies données avant publication.

Étape 5 — Bouton d’action (optionnel)

Dans Bouton d’action (optionnel) :

  1. Cochez Afficher un bouton.

  2. Renseignez le libellé (ex. « Demander un devis »).

  3. Indiquez l’URL de destination (page contact, formulaire de devis, etc.).

Le bouton s’affiche sous le calendrier sur votre site.

Étape 6 — Intégrer le code sur votre site

  1. Enregistrez votre configuration.

  2. Dans Code à intégrer, copiez le snippet affiché. Il ressemble à :

<div id="neovenue-booking-availability"></div> <script src="https://assets.neovenue.fr/embed/booking-availability.js" data-token="VOTRE_TOKEN"></script>

  1. Collez ce code dans le HTML de la page où vous souhaitez afficher le calendrier (corps de page, bloc HTML personnalisé, etc.).

  2. L’attribut data-token est unique à votre entreprise : ne le partagez pas publiquement en dehors de l’intégration sur vos sites autorisés.

Vérifier que tout fonctionne

  1. Le calendrier est activé dans NeoVenue.

  2. Le domaine de votre site est bien listé dans Sites autorisés.

  3. Vous avez enregistré après vos modifications.

  4. Le code est collé sur une page dont l’URL correspond à un site autorisé.

  5. Rechargez la page (vidage du cache si nécessaire).

Si le calendrier ne s’affiche pas, vérifiez la console du navigateur et confirmez que le domaine de la page correspond exactement à l’origine autorisée (avec ou sans www).

À noter

  • Le calendrier reflète vos réservations NeoVenue (contrats actifs). Les visites de lieu ou événements externes non saisis dans NeoVenue n’y apparaissent pas.

  • Aucune donnée client (nom, e-mail, etc.) n’est exposée sur le site : seules les dates libres ou occupées sont transmises.

  • Pour modifier l’apparence après mise en ligne, changez le style ou le CSS dans NeoVenue, enregistrez : le calendrier sur votre site se met à jour automatiquement au prochain chargement.

  • Le calendrier de disponibilités est distinct du widget de devis (onglet Widget devis dans la même page) et de la synchronisation calendrier (Google / Outlook) décrite dans l’article sur la sync des visites et réservations.

Mots-clés : calendrier, disponibilités, dates libres, réservations, widget, intégration, site web, embed, salles, HTML, sites autorisés, NeoVenue.

Avez-vous trouvé la réponse à votre question ?