Une ligne à coller sur votre site.

Avant de commencer

• Votre identifiant, par exemple salon-dupont. Il vous est remis à la mise en service.
• Les adresses de votre site, avec et sans www, et l’adresse en .myshopify.com ou .wixsite.com si vous l’utilisez. Le service n’accepte les réservations que depuis les sites déclarés pour votre agenda.
• Vos prestations, horaires, capacité et questions sont réglés chez nous, d’après votre métier. Le code n’en contient aucun : un changement d’horaire ne demande pas de toucher à votre site.

La ligne à coller

Collez-la à l’endroit où le module doit apparaître. Le script insère le module juste après lui. Posé dans l’en-tête de la page, il le place à la fin de la page.

<script src="https://creneau-test.vercel.app/module/creneau.js" data-garage="VOTRE-ID" async></script>

Remplacez seulement VOTRE-ID. Le script trouve tout seul l’adresse du service, dans un fichier publié à côté de lui. Il recopie aussi data-accent, data-theme, data-service et data-kind s’ils sont présents.

La balise explicite

Pour placer le module précisément, ou en mettre plusieurs sur un même site, chargez le script une fois puis posez la balise <creneau-rdv>.

<script src="https://creneau-test.vercel.app/module/creneau.js" async></script>
<creneau-rdv garage="VOTRE-ID"></creneau-rdv>

Une page de votre site peut ouvrir le module directement sur la bonne prestation, par exemple une page « Pneus » chez un garage :

<creneau-rdv garage="VOTRE-ID" service="pneus" accent="#1F5E4A"></creneau-rdv>

Les attributs

Tous les attributs peuvent changer après le chargement : le module se met à jour. Il s’adapte à la largeur de sa zone, de 320 à 1 100 px : bandeau des jours et barre du rendez-vous en bas sur téléphone ; mois, heures en colonne et récapitulatif collant à droite sur ordinateur.

Les couleurs et la police

Le module vit dans son propre espace : les styles de votre thème ne le déforment pas. Pour l’accorder à votre site, posez ces variables sur l’élément ou sur un parent, dans la feuille de style de votre thème.

creneau-rdv {
  --cr-font: "Votre police", system-ui, sans-serif; /* par défaut : la police de votre site */
  --cr-accent: #1F5E4A;      /* boutons, sélection, focus */
  --cr-accent-ink: #FFFFFF;  /* texte sur l'accent */
  --cr-bg: #FFFFFF;          /* fond du module */
  --cr-surface: #F5F5F2;     /* cartes et bandeaux */
  --cr-text: #15181B;
  --cr-muted: #5A6067;
  --cr-line: #DCDDD8;
  --cr-radius: 10px;
  --cr-border: 1px solid #DCDDD8; /* cadre du module : none pour l'enlever */
  --cr-sticky-top: 16px;     /* hauteur de votre en-tête fixe + 16px */
}

Les événements

Le module émet trois événements sur la page, sans aucune donnée personnelle. Ils vous servent si vous suivez vos propres statistiques.

<script>
  // Vos propres statistiques : aucune donnée personnelle n'est transmise.
  document.addEventListener('creneau:step', function (e) {
    console.log('Étape', e.detail.step); // service, vehicle, slot, contact, done
  });
  document.addEventListener('creneau:booked', function (e) {
    console.log('Rendez-vous', e.detail.ref, e.detail.status, e.detail.start);
  });
</script>

Sur votre site, le module n’envoie aucune mesure d’audience à Créneau.

Shopify, WordPress, Wix, HTML

https://creneau-test.vercel.app/module/creneau.js?garage=VOTRE-IDENTIFIANT

https://creneau-test.vercel.app/embed?garage=VOTRE-ID

Sans script : l’iframe

Pour les outils qui refusent les scripts, le module existe seul sur une page : https://creneau-test.vercel.app/embed?garage=VOTRE-ID. On y ajoute au besoin &theme=dark, &accent=%231F5E4A, &service= ou &kind=.

Si votre outil accepte un petit script à côté du cadre, ce code ajuste la hauteur du cadre au module, étape par étape, à la hausse comme à la baisse. Le cadre n’accepte que les messages de Créneau et borne la hauteur entre 300 et 6 000 px.

<iframe id="creneau" src="https://creneau-test.vercel.app/embed?garage=VOTRE-ID"
        title="Prise de rendez-vous" loading="lazy"
        style="width:100%;height:1100px;border:0"></iframe>
<script>
  (function () {
    var frame = document.getElementById('creneau');
    window.addEventListener('message', function (e) {
      if (e.origin !== 'https://creneau-test.vercel.app' || e.source !== frame.contentWindow) return;
      var d = e.data;
      if (!d || d.type !== 'creneau:height' || !Number.isInteger(d.height)) return;
      frame.style.height = Math.min(6000, Math.max(300, d.height)) + 'px';
    });
  })();
</script>

Le lien sur la fiche Google

Dans votre fiche d’établissement Google, modifiez le profil et ajoutez un lien de prise de rendez-vous : l’adresse de la page de votre site où se trouve le module. Google affiche alors un bouton sur votre fiche, qui ouvre cette page.

Avec les formules Essentiel et Pro, nous l’ajoutons pour vous. Ce lien n’est pas le bouton « Réserver avec Google » intégré, qui demande un partenariat avec Google : Créneau ne le propose pas.

L’agenda : flux et lecture

Vos rendez-vous dans votre agenda

Chaque agenda a un flux d’agenda privé (ICS). Copiez son adresse dans la console, onglet Agenda, puis abonnez-vous :

• Google Agenda : Autres agendas → + → À partir de l’URL.
• Apple Calendrier : Fichier → Nouvel abonnement à un calendrier.
• Outlook : Ajouter un calendrier → S’abonner à partir du web.

Le flux contient les rendez-vous confirmés et ceux « [À confirmer] », de 30 jours en arrière à 180 jours en avant, avec le client, le téléphone, ses réponses (le véhicule pour un garage, les couverts pour un restaurant) et la remarque. Son adresse est secrète : nous pouvons la renouveler. Google rafraîchit un abonnement à son rythme, souvent toutes les quelques heures ; la console, elle, est toujours à jour.

Votre agenda existant, lu par Créneau

Avec les formules Essentiel et Pro, donnez-nous l’« adresse secrète au format iCal » de votre agenda Google (ou d’un autre agenda). Toutes les 15 minutes, Créneau la lit et bloque les créneaux déjà pris : un rendez-vous noté au téléphone dans votre agenda bloque ce créneau en ligne dans les 15 minutes.

Pris en charge : les événements simples, les journées entières, les répétitions quotidiennes et hebdomadaires et leurs exceptions. Le reste est ignoré et signalé dans la console.

La console

À la mise en service, vous recevez un lien privé vers votre console. Ouvrez-le sur l’ordinateur de l’accueil, une tablette ou votre téléphone, et ajoutez-le à vos favoris.

• Jour : la journée colonne par colonne (une par personne, poste, salle ou pont), avec la pause et, pour un garage, les dépôts.
• À confirmer : confirmer ou refuser, avec un message au client.
• Bloquer : fermer un créneau quand un client appelle.
• Fermetures : vacances, inventaire, jour de formation.
• Agenda : l’adresse de votre flux ICS.

Le lien est personnel : ne le partagez pas. En cas de doute, nous le renouvelons et l’ancien cesse de marcher.

Tester votre installation

1. Le module s’affiche sur la page publiée, sur ordinateur et sur téléphone.
2. Réservez un créneau à votre nom : la réservation arrive dans la console, et l’email de confirmation dans votre boîte.
3. Ouvrez le lien « Gérer ce rendez-vous » de l’email et annulez : le créneau redevient libre dans le module.
4. Un message « origine refusée » ? Écrivez-nous l’adresse exacte de votre site.

Si le service est momentanément injoignable, le module le dit et propose de réessayer. S’il connaît déjà votre agenda, il affiche aussi votre téléphone et votre email.