Embedding modes

The script at https://iframe.zaptime.app/zaptime.js exposes a global Zaptime object with four embedding modes.

<script src="https://iframe.zaptime.app/zaptime.js"></script>

Mode	Renders	Use it for
Inline	The calendar inside a container element	A dedicated booking page or section
Floating button	A button fixed to the bottom corner that opens a modal	A global call to action on every page
Inline button	A button inside a container that opens a modal	A contextual call to action in your content
Popup	Nothing; binds click handlers to your own elements	Links and buttons you already have

Every mode takes the same config object described in the config reference. The dashboard configuration of the event type is fetched first and the values you pass locally override it.

Inline

<div id="calendar-container"></div>

<script>
  Zaptime({
    type: "single",
    config: { token: "YOUR_TOKEN" },
  }).render("#calendar-container");
</script>

Option	Type	Required	Description
config	ZaptimeConfig	Yes	At minimum { token }.
type	"single" | "group"	No	"single" (default) renders one event type. "group" renders an event type group.
position	"left" | "center" | "right"	No	Horizontal alignment of the calendar inside the container. Default "center".
onEventChanged	function	No	Called when the selected event changes.

The iframe resizes its height automatically to the calendar content and takes the full width of the container.

Floating button

<script>
  var floating = Zaptime.floatingButton({
    type: "single",
    config: { token: "YOUR_TOKEN" },

    position: "bottom-left", // "bottom-right" is the default

    // Button appearance (Pro feature; the free tier shows Zaptime branding)
    buttonText: "Schedule a Call",
    buttonColor: "#6366f1",
    buttonTextColor: "#ffffff",

    onOpen: function () {},
    onClose: function () {},
  });
</script>

Option	Type	Default	Description
config	ZaptimeConfig		Required.
type	"single" | "group"	"single"
position	"bottom-right" | "bottom-left"	"bottom-right"	Corner of the viewport.
buttonText	string	"Book a Meeting"	Button label (Pro).
buttonColor	string	"#15B79E"	Button background (Pro).
buttonTextColor	string	"#FFFFFF"	Button text color (Pro).
onOpen	function		Modal opened.
onClose	function		Modal closed.
onEventChanged	function		Selected event changed.

The returned instance has open(), close(), destroy() and an id.

Inline button

Same as the floating button, but the button is inserted into a container of your choice and follows the normal document flow.

<p>Book directly: <span id="booking-button"></span></p>

<script>
  var inlineButton = Zaptime.inlineButton({
    selector: "#booking-button",
    type: "single",
    config: { token: "YOUR_TOKEN" },
    buttonText: "Schedule Now",
  });
</script>

Option	Type	Required	Description
selector	string	Yes	CSS selector of the container the button is inserted into.
config, type, buttonText, buttonColor, buttonTextColor, onOpen, onClose, onEventChanged			Same as the floating button.

The returned instance has open(), close(), destroy() and an id.

Popup

Popup mode binds a click handler to elements you already have. By default it looks for [data-zaptime-link].

<a href="#" data-zaptime-link>Book a meeting</a>
<button data-zaptime-link>Schedule now</button>

<script>
  var popup = Zaptime.popup({
    type: "single",
    config: { token: "YOUR_TOKEN" },
  });
</script>

Use a custom selector when you cannot add attributes:

<button class="booking-trigger">Book Now</button>

<script>
  var popup = Zaptime.popup({
    config: { token: "YOUR_TOKEN" },
    selector: ".booking-trigger",
    onOpen: function () {},
    onClose: function () {},
  });
</script>

Option	Type	Default	Description
config	ZaptimeConfig		Required.
type	"single" | "group"	"single"
selector	string	"[data-zaptime-link]"	Elements that open the modal.
onOpen, onClose, onEventChanged	function		Callbacks.

The returned instance has open(), close() and destroy().

Elements added to the DOM after initialization are picked up automatically (a MutationObserver watches for the selector), so it works with client-side rendered content.

Modal behaviour

Floating button, inline button, and popup share one modal:

• Click on the backdrop or press Escape to close.
• Close button in the top right corner.
• Page scroll is locked while open.
• Modal is at most 1050px wide and 850px tall and scales down on small screens.
• Dark mode follows config.theme.mode. When it is not set, the modal follows the system prefers-color-scheme and reacts to changes live.

Event type groups

Set type: "group" and pass a group token to show a list of event types first. The visitor picks one, then sees its calendar. The group title, description, avatar and theme come from the dashboard.

<div id="calendar-container"></div>

<script>
  Zaptime({
    type: "group",
    config: { token: "YOUR_GROUP_TOKEN" },
  }).render("#calendar-container");
</script>

Group mode works with every embedding mode.

Dark mode

Pass theme.mode explicitly to force a mode:

Zaptime({
  config: {
    token: "YOUR_TOKEN",
    theme: { mode: "dark" },
  },
}).render("#calendar-container");

Complete example

<!doctype html>
<html>
  <body>
    <h1>Book a Meeting</h1>

    <div id="calendar"></div>

    <p>Book directly: <span id="booking-button"></span></p>
    <p>Or <a href="#" data-zaptime-link>click here</a> to open the calendar in a modal.</p>

    <script src="https://iframe.zaptime.app/zaptime.js"></script>
    <script>
      var config = { token: "YOUR_TOKEN" };

      Zaptime({ config: config }).render("#calendar");

      Zaptime.floatingButton({ config: config, position: "bottom-right" });

      Zaptime.inlineButton({
        selector: "#booking-button",
        config: config,
        buttonText: "Schedule Now",
      });

      Zaptime.popup({ config: config });
    </script>
  </body>
</html>

Frameworks

The script works in any framework as long as it runs in the browser after the container exists. In React, call Zaptime(...) inside useEffect; in Vue, inside onMounted. For Vue 3 and Nuxt prefer the @zaptime/vue3 component, which renders without an iframe.