Intégration rapide

Iframe

<iframe
  src="https://static.example.com/randevou/widget.html?apiBaseUrl=https%3A%2F%2Fapi.example.com&locale=fr&theme=light&layout=split&density=comfortable&brandName=Cabinet%20Martin&introText=Choisissez%20le%20moment%20qui%20vous%20convient."
  title="Prendre rendez-vous"
  loading="lazy"
></iframe>

Script JavaScript

<div
  id="randevou-booking"
  data-randevou-widget
  data-api-base-url="https://api.example.com"
  data-locale="fr"
  data-mode="inline"
  data-appointment-title="Rendez-vous de découverte"
  data-appointment-duration="30 min"
  data-timezone="Europe/Paris"
  data-accent-color="#0f6fff"
  data-theme="light"
  data-layout="split"
  data-density="comfortable"
  data-brand-name="Cabinet Martin"
  data-intro-text="Choisissez le moment qui vous convient."
  data-show-summary="true"
></div>
<script src="https://static.example.com/randevou/randevou-widget.js" defer></script>

Initialisation JavaScript

<div id="randevou-booking"></div>
<script src="https://static.example.com/randevou/randevou-widget.js" defer></script>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.Randevou.init({
      target: "#randevou-booking",
      apiBaseUrl: "https://api.example.com",
      locale: "fr",
      mode: "inline",
      appointmentTitle: "Rendez-vous de découverte",
      appointmentDuration: "30 min",
      timezone: "Europe/Paris",
      accentColor: "#0f6fff",
      theme: "light",
      layout: "split",
      density: "comfortable",
      brandName: "Cabinet Martin",
      introText: "Choisissez le moment qui vous convient.",
      showSummary: true
    });
  });
</script>

Options visuelles publiques

accentColor / data-accent-color: couleur principale des actions et etats selectionnes.
theme / data-theme: light pour le rendu premium actuel.
layout / data-layout: split par defaut; le widget passe en vertical sur mobile.
density / data-density: comfortable par defaut, compact prepare pour les conteneurs contraints.
brandName / data-brand-name: nom public de l’organisation ou du praticien.
brandLogo / data-brand-logo: URL publique optionnelle d’un logo.
introText / data-intro-text: phrase courte affichee dans le panneau rendez-vous.
showSummary / data-show-summary: true ou false.

Hugo

Dans un shortcode Hugo, garde seulement les valeurs publiques:

<div
  data-randevou-widget
  data-api-base-url="{{ .Site.Params.apiBaseUrl }}"
  data-locale="fr"
  data-appointment-title="Rendez-vous de découverte"
  data-accent-color="#0f6fff"
  data-brand-name="Cabinet Martin"
  data-intro-text="Choisissez le moment qui vous convient."
></div>
<script src="/randevou/randevou-widget.js" defer></script>

WordPress

Ajoute le conteneur dans un bloc HTML personnalisé, puis charge le script avec la méthode habituelle du thème ou du constructeur de page:

<div
  data-randevou-widget
  data-api-base-url="https://api.example.com"
  data-locale="fr"
  data-accent-color="#0f6fff"
  data-brand-name="Cabinet Martin"
></div>

SPIP

Ajoute le conteneur dans le squelette ou dans un article qui autorise le HTML:

<div
  data-randevou-widget
  data-api-base-url="https://api.example.com"
  data-locale="fr"
  data-accent-color="#0f6fff"
  data-brand-name="Cabinet Martin"
></div>

Le widget appelle uniquement l’API publique GET /api/slots et POST /api/book. Les clés Google Calendar, CalDAV/Zimbra, Brevo et SMTP restent dans les variables d’environnement du backend.