Embedding the Booking Page on Your Website

If you want customers to be able to book directly from your website without being taken to an external page, you can embed the Speako booking page using an iframe. This keeps the booking experience within your own site.

What embedding means

Embedding places the booking page inside your website using a small snippet of HTML code. Visitors on your website can complete a booking without leaving — it appears as a seamless part of your page.

The embed code

To embed the booking page, use a standard HTML iframe pointing to your booking page URL:

<iframe
  src="https://book.speako.com/[your-business-name]"
  width="100%"
  height="800"
  frameborder="0"
  style="border: none; overflow: hidden;"
  scrolling="auto"
></iframe>

Replace https://book.speako.com/[your-business-name] with your actual booking page URL (found in the Booking URL row on the Booking Page settings).

Where to place it on your website

Common placements include:

  • A dedicated "Book Now" or "Reservations" page on your website.
  • The homepage, if bookings are the primary action you want visitors to take.
  • A contact page, alongside your phone number and address.

Adjusting the size

The height value in the iframe controls how much of the booking page is visible without scrolling. You may need to adjust it based on how your booking page looks — a value between 700 and 1000 pixels works for most pages.

For a fully responsive embed that adjusts to screen height, use height="100vh" or wrap the iframe in a container with CSS height settings.

Important considerations

⚠️ Important: The embed only works when Online Booking is enabled. If online booking is turned off, the iframe will display an unavailable message or may not load correctly.

⚠️ Important: Some website builders (like Wix, Squarespace, or Webflow) have specific steps for adding custom HTML or iframe blocks. Consult your website platform's documentation for how to add an iframe or custom HTML element.

💡 Tip: After embedding, test the page on both desktop and mobile to ensure the booking form fits correctly and is easy to use. Adjust the iframe height or container size as needed.

Your booking page URL does not change unless your account alias changes. Once embedded, the iframe will always load the latest version of your booking page — any updates you make to the page's appearance or content will be reflected without needing to update the embed code.