Script tag

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Book a meeting</title>
  </head>
  <body>
    <h1>Book a meeting</h1>

    <!-- Inline calendar -->
    <div id="calendar"></div>

    <!-- Inline button inside your content -->
    <p>Prefer a modal? <span id="booking-button"></span></p>

    <!-- Any element with data-zaptime-link opens the modal -->
    <p>Or <a href="#" data-zaptime-link>click here</a>.</p>

    <script src="https://iframe.zaptime.app/zaptime.js"></script>
    <script>
      var config = {
        token: "YOUR_TOKEN",
        locale: { preset: "en" },
        theme: { mode: "light" },
      };

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

      Zaptime.floatingButton({
        config: config,
        position: "bottom-right",
        buttonText: "Book a call",
        onOpen: function () { console.log("opened"); },
      });

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

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

Options for every mode are in Embedding modes.

Script tag ​

Script tag