Embedded Booking

Overview

Otake Embedded Booking lets you place a fully functional booking widget on your website, portfolio, landing page, or client portal. Visitors can view your event details, browse available dates, choose a time slot in their own timezone, fill in their details, and complete the booking - all without leaving your site.

The widget stays connected to your Otake event automatically. When you change the event name, schedule, duration, price, or availability in Otake - the widget updates everywhere it's embedded. No code change required.

Use Embedded Booking when you want to

• let clients book without redirecting them to another site
• keep the entire booking experience inside your own website
• reduce friction and improve conversion
• keep event details always up to date automatically

Before you start

Make sure that:

• you have an active Otake account on a paid plan
• Booking is enabled with an active subscription
• you have at least one booking event created
• your website supports custom HTML or an embed block

Get your embed code

1. Open Booking in your Otake dashboard
2. Go to Events
3. Find the event you want to embed
4. Click Add to website on the event card
5. Adjust width, height, and color mode if needed
6. Open the HTML Code tab
7. Click Copy
8. Paste the code into your website

The embed code

The snippet contains a container div and the Otake widget script. The script mounts the booking iframe automatically.

<div
  class="otake-booking"
  data-page-id="YOUR_PAGE_ID"
  data-event-id="YOUR_EVENT_ID"
  data-theme="light"
  data-width="auto"
  data-height="auto"
></div>
<script src="https://otake.io/widgets/booking-widget.js" async></script>

Attribute reference

Customization

Adjust the widget appearance in the Add to website dialog before copying the code.

What updates automatically vs. what needs a new copy

• Event details — name, duration, price, availability, description load dynamically. No code update needed when they change.
• Style options — width, height, color mode are saved inside the snippet. After changing them, copy the updated code and replace the old snippet on your site.

Responsive behavior

The widget is responsive. In wide containers, event info and the calendar appear side by side. In narrow containers, the layout stacks vertically so both stay readable.

• Use data-width="auto" unless the target site requires a fixed width
• Use data-height="auto" unless the layout requires a fixed iframe height
• Avoid placing the widget in containers narrower than 320px
• On mobile pages, make sure the parent container uses the full viewport width

Add to your website

The universal rule: find any HTML / Embed / Custom code block on your platform and paste the full Otake snippet — container div and script tag together. If your platform supports custom HTML and scripts, Otake will work there.

Step-by-step per platform

How visitors book

When a visitor opens a page with your embedded widget:

1. The widget loads inside your site
2. The visitor sees the event details and available dates
3. Time slots are shown in the visitor's local timezone, detected automatically by their browser
4. The visitor selects a date
5. The visitor selects an available time slot
6. The visitor fills in the booking form:
   • Name — required
   • Email — required (one address only)
   • Comment — optional
7. The visitor accepts the standard Otake booking terms
8. Booking is confirmed. For paid events, the payment step is handled inside the embedded flow.

If Booking is disabled

If you disable Booking on your Otake account or page, all embedded widgets connected to it stop working immediately. Visitors see an unavailable state instead of the calendar. Re-enabling Booking restores the widget automatically - no code change needed.

Before disabling, Otake shows a warning:

FAQ / Troubleshooting

Need help?