Intégrer votre page de réservation

Avant de commencer

• Autorisez votre site. Une page de réservation ne peut être intégrée que par les sites autorisés pour votre espace de travail. Pour l'instant, envoyez l'adresse de votre site (par exemple https://www.example.com) à support@atoly.co. Tant qu'il n'est pas autorisé, les navigateurs affichent une erreur à la place de la page de réservation. Un réglage pour gérer cette liste vous-même est prévu.
• Types d'événements exclusifs uniquement. Les types d'événements de groupe se réservent date par date et n'ont pas de page de réservation propre : ils ne peuvent pas encore être intégrés.
• Code prêt à l'emploi. Dans Atoly, ouvrez Types d'événements, puis Intégrer sur votre site dans le menu d'un type d'événement. Le code proposé contient déjà votre espace de travail et votre type d'événement.

Modes d'intégration

• Dans la page : la page de réservation s'affiche dans votre page, à l'endroit choisi. Sa hauteur suit son contenu.
• Pop-up : un bouton ou un lien de votre site ouvre la page de réservation dans une fenêtre modale.
• Bouton flottant : un bouton fixé dans un coin de la page ouvre la page de réservation dans une fenêtre modale.
• React : un composant pour les sites React.
• Iframe : une iframe simple, sans le script, de hauteur fixe.

Les exemples ci-dessous utilisent des valeurs à remplacer : your-workspace par le sous-domaine de votre page publique (your-workspace.atoly.co) et your-event par le slug du type d'événement, la partie de son lien de réservation après /events/.

Le script

Les modes dans la page, pop-up et bouton flottant ont besoin d'un script. Ajoutez-le une fois par page, avant les autres extraits :

<script>
  window.Atoly = window.Atoly || function () { (Atoly.q = Atoly.q || []).push(arguments); };
</script>
<script async src="https://atoly.co/embed.js"></script>
<script>
  Atoly("init", { origin: "https://atoly.co" });
</script>

Le premier script met en file d'attente les appels Atoly(...) faits avant le chargement de embed.js : les extraits ci-dessous peuvent s'exécuter dans n'importe quel ordre.

Dans la page

<div id="atoly-booking"></div>
<script>
  Atoly("inline", {
    elementOrSelector: "#atoly-booking",
    link: "your-workspace/your-event",
    config: { theme: "auto" },
  });
</script>

Pour intégrer plusieurs types d'événements sur une même page, donnez un id différent à chaque conteneur.

Pop-up

<button
  type="button"
  data-atoly-link="your-workspace/your-event"
  data-atoly-config='{"theme":"auto"}'
>
  Réserver
</button>

Un clic sur un élément portant data-atoly-link ouvre la page de réservation dans une fenêtre modale. data-atoly-config accepte les options ci-dessous, en JSON.

Bouton flottant

<script>
  Atoly("floatingButton", {
    link: "your-workspace/your-event",
    buttonText: "Réserver",
  });
</script>

React

npm install @atoly/embed-react

import { AtolyEmbed } from "@atoly/embed-react";

export function Booking() {
  return (
    <AtolyEmbed
      link="your-workspace/your-event"
      config={{ theme: "auto" }}
    />
  );
}

Le composant n'a pas besoin de balise script.

Options

Les options se placent dans config (dans la page, React), dans data-atoly-config (pop-up) ou dans l'URL de l'iframe simple.

Exemple de pré-remplissage :

Atoly("inline", {
  elementOrSelector: "#atoly-booking",
  link: "your-workspace/your-event",
  config: {
    theme: "dark",
    lng: "fr",
    name: "Marie Dupont",
    email: "marie@example.com",
    notes: "Sujet : nouveau site",
  },
});

Les valeurs pré-remplies font partie de l'URL de la page de réservation. Le visiteur peut toujours les modifier dans le formulaire.

Pour changer theme ou hideEventTypeDetails sur les intégrations déjà présentes dans la page, par exemple quand le visiteur passe votre site en mode sombre :

Atoly("ui", { theme: "dark" });

Événement de réservation

bookingSuccessful se déclenche une fois la réservation confirmée :

Atoly("on", {
  action: "bookingSuccessful",
  callback: (event) => {
    const { eventTypeSlug, startTime } = event.detail.data;
    // Par exemple, enregistrer une conversion dans vos statistiques.
  },
});

startTime est une date ISO 8601 en UTC. L'événement ne contient aucune donnée personnelle du participant et n'est envoyé qu'aux sites autorisés.

Iframe simple

Sans le script, intégrez la page de réservation dans une iframe :

<iframe
  src="https://your-workspace.atoly.co/events/your-event/availability?embed=1&theme=auto"
  style="width: 100%; height: 720px; border: 0"
  allow="payment *"
></iframe>

• Les options sont des paramètres d'URL : theme=dark, lng=fr, hideEventTypeDetails=1, name=Marie%20Dupont, etc. Encodez les valeurs (encodeURIComponent).
• La hauteur reste fixe : l'iframe ne s'adapte pas à son contenu.
• La page de réservation envoie des messages à votre page : { originator: "atoly", action: "atoly:bookingSuccessful", data: { eventTypeSlug, startTime } } une fois la réservation confirmée, et atoly:dimension avec { height } quand sa hauteur change.

Thèmes clair et sombre

Quand le thème de l'intégration diffère de celui de votre page, les navigateurs peignent un fond opaque (blanc ou noir) derrière l'intégration au lieu de laisser voir votre page. Utilisez le même theme que votre page : light sur un site clair, dark sur un site sombre. Si votre site suit le réglage système, utilisez auto et déclarez color-scheme: light dark sur votre page. Si votre site a son propre sélecteur, appelez Atoly("ui", { theme }) quand le visiteur l'utilise.