Back to Home

Embed Zeitplanr

Add booking widgets to your website

Configuration

Customize your embed settings

Method 1: Direct iframe

Simple embed using an iframe. No JavaScript required.

<iframe
  src="/embed/YOUR_USERNAME"
  width="100%"
  height="600"
  frameborder="0"
  scrolling="no"
></iframe>

Method 2: Auto-initialize Script

Add data attributes and let the script handle initialization.

<!-- Add to your HTML -->
<div id="zeitplanr-widget"
  data-username="YOUR_USERNAME"
></div>
<script src="/embed.js"></script>

Method 3: JavaScript API

Full control with callbacks for booking events.

<script src="/embed.js"></script>
<script>
  Zeitplanr.init({
    container: '#booking-container',
    username: 'YOUR_USERNAME',
    onBookingCreated: function(booking) {
      console.log('Booking created:', booking);
      // Handle successful booking
    },
    onError: function(error) {
      console.error('Booking error:', error);
      // Handle errors
    }
  });
</script>

JavaScript API Reference

Configuration Options

container - CSS selector or DOM element

username - Your Zeitplanr username (required)

eventType - Specific event type slug (optional)

hideHeader - Hide event info header (default: false)

hideBranding - Hide "Powered by" (default: false)

primaryColor - Custom HSL color (e.g., "210 40% 50%")

minHeight - Minimum iframe height in pixels (default: 400)

Callbacks

onReady(data) - Widget loaded and ready

onStepChange(step) - Booking step changed (date/time/form)

onDateSelected(date) - User selected a date

onTimeSelected(slot) - User selected a time slot

onBookingCreated(booking) - Booking successfully created

onError(message) - An error occurred

Methods

widget.destroy() - Remove widget from DOM

widget.reload() - Reload the widget