Widget de réservation | VillaSlot Documentation

Le widget place votre page de réservation publique dans votre propre site. Une balise <script>, aucune étape de build, aucune clé API : il dessine une iframe qui s’ajuste à son contenu.

1. L’activer et autoriser vos domaines

Réglages de l’organisation → Réservation publique → Widget de réservation. Activez le widget et listez les domaines autorisés à l’afficher — jusqu’à 10.

Saisissez un nom d’hôte, éventuellement avec un port : villa-suar.com, www.villa-suar.com, localhost:4010. Pas de https://, pas de chemin, pas de joker.
www.villa-suar.com et villa-suar.com sont deux domaines différents : ajoutez les deux si votre site répond sur les deux.
Seuls les sites en https:// sont autorisés, sauf localhost qui fonctionne aussi en http:// pour les tests locaux. Un domaine sans port ne couvre que le port par défaut.

Le widget ne fonctionne que tant que la réservation publique est ouverte. Fermer un type de réservation dans le même onglet le ferme aussi dans le widget.

Tout site absent de la liste est refusé par le navigateur lui-même : la page de réservation envoie une politique frame-ancestors qui ne nomme que vos domaines.

2. Coller le script

Copiez l’extrait affiché dans l’onglet, ou écrivez-le vous-même :

html

<script
  src="https://www.villaslot.io/widget.js"
  data-organization="your-organization-slug"
  data-mode="hourly"
  data-locale="en"
  async
></script>

Attribut	Valeurs	Par défaut
`data-organization`	le slug de votre organisation	obligatoire
`data-mode`	`hourly` ou `overnight`	`hourly`
`data-locale`	`en`, `fr` ou `es`	`en`

Le widget apparaît exactement là où se trouve la balise. Pour proposer les deux types, collez deux balises — une par data-mode. Tout autre attribut data-* est ignoré.

3. Ce qui se passe à la réservation

Le client réserve dans le widget. Le paiement s’ouvre toujours dans un nouvel onglet sur VillaSlot, jamais dans l’iframe — les données de carte ne sont jamais saisies dans un cadre de votre page. Le client reçoit aussi le lien de réservation par email, pour pouvoir revenir payer plus tard.

Quand une réservation est créée, le script déclenche un événement villaslot:booking-created sur son propre élément <script>. Servez-vous-en pour vos statistiques :

html

<script>
  document
    .querySelector('script[src$="/widget.js"]')
    .addEventListener('villaslot:booking-created', () => {
      // e.g. send a conversion event
    })
</script>

L’événement ne transporte aucune donnée client.

Apparence

Le widget suit les réglages Apparence de la page publique — thème et couleur principale — et non le thème de votre site ou du compte VillaSlot du visiteur. Les changements s’appliquent au chargement suivant, sans modifier l’extrait.