Osadź swoją stronę rezerwacji

Zanim zaczniesz

• Dodaj swoją stronę do dozwolonych. Stronę rezerwacji mogą osadzać tylko strony dozwolone dla Twojego miejsca pracy. Na razie wyślij adres swojej strony (na przykład https://www.example.com) na support@atoly.co. Dopóki strona nie jest dozwolona, przeglądarki wyświetlają błąd zamiast strony rezerwacji. Planowane jest ustawienie, w którym samodzielnie zarządzisz tą listą.
• Tylko indywidualne typy wydarzeń. Grupowe typy wydarzeń rezerwuje się na konkretne terminy i nie mają własnej strony rezerwacji: nie można ich jeszcze osadzać.
• Gotowy kod. W Atoly otwórz Typy wydarzeń, a następnie Osadź na swojej stronie w menu typu wydarzenia. Kod zawiera już Twoje miejsce pracy i typ wydarzenia.

Sposoby osadzania

• Na stronie: strona rezerwacji wyświetla się wewnątrz Twojej strony, w wybranym miejscu. Jej wysokość dopasowuje się do zawartości.
• Pop-up: przycisk lub link na Twojej stronie otwiera stronę rezerwacji w oknie modalnym.
• Pływający przycisk: przycisk przypięty w rogu strony otwiera stronę rezerwacji w oknie modalnym.
• React: komponent dla stron w React.
• Iframe: zwykły iframe, bez skryptu, o stałej wysokości.

Przykłady poniżej zawierają wartości do zastąpienia: your-workspace to subdomena Twojej strony publicznej (your-workspace.atoly.co), a your-event to slug typu wydarzenia, czyli część jego linku do rezerwacji po /events/.

Skrypt

Osadzanie na stronie, pop-up i pływający przycisk wymagają jednego skryptu. Dodaj go raz na stronę, przed pozostałymi fragmentami kodu:

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

Pierwszy skrypt kolejkuje wywołania Atoly(...) wykonane przed załadowaniem embed.js, więc poniższe fragmenty mogą działać w dowolnej kolejności.

Na stronie

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

Aby osadzić kilka typów wydarzeń na jednej stronie, nadaj każdemu kontenerowi inny id.

Pop-up

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

Kliknięcie dowolnego elementu z atrybutem data-atoly-link otwiera stronę rezerwacji w oknie modalnym. data-atoly-config przyjmuje poniższe opcje w formacie JSON.

Pływający przycisk

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

Komponent nie wymaga znacznika script.

Opcje

Opcje podaje się w config (na stronie, React), w data-atoly-config (pop-up) lub w adresie URL zwykłego iframe.

Przykład wstępnego wypełniania:

Atoly("inline", {
  elementOrSelector: "#atoly-booking",
  link: "your-workspace/your-event",
  config: {
    theme: "dark",
    lng: "pl",
    name: "Anna Kowalska",
    email: "anna@example.com",
    notes: "Temat: nowa strona",
  },
});

Wstępnie wypełnione wartości są częścią adresu URL strony rezerwacji. Odwiedzający może je zmienić w formularzu.

Aby zmienić theme lub hideEventTypeDetails w osadzeniach, które są już na stronie, na przykład gdy odwiedzający przełącza Twoją stronę w tryb ciemny:

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

Zdarzenie rezerwacji

bookingSuccessful jest wywoływane po potwierdzeniu rezerwacji:

Atoly("on", {
  action: "bookingSuccessful",
  callback: (event) => {
    const { eventTypeSlug, startTime } = event.detail.data;
    // Na przykład zapisz konwersję w swoich statystykach.
  },
});

startTime to data w formacie ISO 8601 w UTC. Zdarzenie nie zawiera danych osobowych uczestnika i jest wysyłane tylko do dozwolonych stron.

Zwykły iframe

Bez skryptu osadź stronę rezerwacji w 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>

• Opcje to parametry adresu URL: theme=dark, lng=pl, hideEventTypeDetails=1, name=Anna%20Kowalska itd. Zakoduj wartości (encodeURIComponent).
• Wysokość pozostaje stała: iframe nie dopasowuje się do zawartości.
• Strona rezerwacji wysyła wiadomości do Twojej strony: { originator: "atoly", action: "atoly:bookingSuccessful", data: { eventTypeSlug, startTime } } po potwierdzeniu rezerwacji oraz atoly:dimension z { height }, gdy zmienia się jej wysokość.

Motyw jasny i ciemny

Gdy motyw osadzenia różni się od motywu Twojej strony, przeglądarki rysują za osadzeniem nieprzezroczyste tło (białe lub czarne) zamiast pokazywać Twoją stronę. Ustaw ten sam theme co na swojej stronie: light na jasnej stronie, dark na ciemnej. Jeśli Twoja strona korzysta z ustawienia systemowego, użyj auto i zadeklaruj color-scheme: light dark na swojej stronie. Jeśli Twoja strona ma własny przełącznik, wywołaj Atoly("ui", { theme }), gdy odwiedzający z niego korzysta.