Embed your booking page

Before you start

• Allow your website. A booking page can only be embedded by the websites allowed for your workspace. For now, send the address of your website (for example https://www.example.com) to support@atoly.co. Until it is allowed, browsers show an error in place of the booking page. A setting to manage this list yourself is planned.
• Exclusive event types only. Group event types are booked per date and have no booking page of their own: they cannot be embedded yet.
• Ready-made code. In Atoly, open Event Types, then Embed on your website in the menu of an event type. The code there has your workspace and event type filled in.

Ways to embed

• Inline: the booking page sits inside your page, where you place it. Its height follows its content.
• Popup: a button or link of your site opens the booking page in a modal.
• Floating button: a button fixed in a corner of the page opens the booking page in a modal.
• React: a component for React sites.
• Iframe: a plain iframe, without the script, with a fixed height.

The examples below use placeholders. Replace your-workspace with the subdomain of your public page (your-workspace.atoly.co) and your-event with the slug of the event type, the part of its booking link after /events/.

The script

Inline, popup and floating button embeds need one script. Add it once per page, before the other snippets:

<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>

The first script queues the Atoly(...) calls made before embed.js has loaded, so the snippets below can run in any order.

Inline

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

To embed several event types on one page, give each container its own id.

Popup

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

A click on any element with data-atoly-link opens the booking page in a modal. data-atoly-config takes the options below as JSON.

Floating button

<script>
  Atoly("floatingButton", {
    link: "your-workspace/your-event",
    buttonText: "Book",
  });
</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" }}
    />
  );
}

The component needs no script tag.

Options

Options go in config (inline, React), in data-atoly-config (popup) or in the URL of the plain iframe.

Prefill example:

Atoly("inline", {
  elementOrSelector: "#atoly-booking",
  link: "your-workspace/your-event",
  config: {
    theme: "dark",
    lng: "fr",
    name: "Jane Doe",
    email: "jane@example.com",
    notes: "Topic: new website",
  },
});

Prefill values are part of the booking page URL. The visitor can still edit them in the form.

To change theme or hideEventTypeDetails on the embeds already on the page, for example when the visitor switches your site to dark mode:

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

Booking event

bookingSuccessful fires once the booking is confirmed:

Atoly("on", {
  action: "bookingSuccessful",
  callback: (event) => {
    const { eventTypeSlug, startTime } = event.detail.data;
    // For example, record a conversion in your analytics.
  },
});

startTime is an ISO 8601 date in UTC. The event carries no personal data of the attendee, and it is only sent to allowed websites.

Plain iframe

Without the script, embed the booking page in an 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>

• Options are URL parameters: theme=dark, lng=fr, hideEventTypeDetails=1, name=Jane%20Doe, and so on. Encode the values (encodeURIComponent).
• The height stays fixed: the iframe does not resize to its content.
• The booking page posts messages to your page: { originator: "atoly", action: "atoly:bookingSuccessful", data: { eventTypeSlug, startTime } } once the booking is confirmed, and atoly:dimension with { height } when its height changes.

Light and dark themes

When the color scheme of the embed differs from the one of your page, browsers paint an opaque background (white or black) behind the embed instead of letting your page show through. Set the same theme as your page: light on a light site, dark on a dark site. If your site follows the system setting, use auto and declare color-scheme: light dark on your page. If your site has its own switch, call Atoly("ui", { theme }) when the visitor uses it.