Tikk
Sign in

Embedding booking pages

The API is read-only: bookings are made on Tikk's own booking page, which you can embed in your product. That way availability, confirmations, reminders and payments all keep working exactly as the Tikk user set them up.

Pick a service

Call GET /services and let the user choose one of their services. Each service has an embed_url, the booking page for that service.

Option 1: the embed script

Tikk's embed script renders the booking page inline or as a popup and resizes itself to fit. Set data-domain to the username, or to username/service-slug for a single service:

<script
  src="https://embed.tikk.chat"
  data-domain="jane/intro-call"
  data-type="inline"
  async
></script>
Attribute Values
data-type inline (default), button-link or button-floating (open a popup)
data-buttontext Button label for the popup types
data-buttoncolor Hex colour for the button
data-content minimal hides the host's details

Option 2: an iframe

If you render your own frame, append ?embed=1 to the embed_url:

<iframe
  src="https://tikk.chat/jane/intro-call?embed=1"
  style="width: 100%; min-height: 600px; border: 0"
></iframe>

The page posts a tikk:resize message with its height, which you can listen for to size the frame:

window.addEventListener('message', (event) => {
  if (event.data?.type === 'tikk:resize') {
    frame.style.height = `${event.data.height}px`;
  }
});

Reading bookings back

To show bookings in your product, poll GET /bookings with the bookings.read scope.