Embedding Timerise booking page

How to embed a Timerise booking page into your website using a standard HTML iframe.

Updated March 1, 2026embeddingiFrameHTMLSDKintegrationbooking page

This article will guide you on how to embed your Timerise booking page into your website using a standard HTML iframe — no third-party tools required.

Why use iFrames?

By embedding your Timerise booking page using an iFrame, you can:

Keep users on your website without redirecting them to a new tab or window.
Customize the size and styling of the embedded booking page.
Provide a seamless user experience.

The default Timerise code: opening in a new tab

The default Timerise JS SDK example includes buttons, links, and images that open the booking page in a new browser tab. Here's the provided code:

<h1>Timerise JS SDK</h1>

<p><button> - <button class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</button></p>
<p><a> - <a href="https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8" class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</a></p>
<p><img> - <img src="https://cdn.timerise.io/landing-page/timerise-logo.png" height="18" class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8"></p>
<p>Old way: onclick trigger - <a href="javascript:void(0);" onclick="openBookingPage('Y1FFTLuSUtppw30QaRh8');">Open booking page</a></p>

<!-- Timerise JS SDK -->
<script src="https://api.timerise.io/sdk/M8ACgxzgyARAqDebMEzp/script.js?v=1"></script>
<!-- end Timerise JS SDK -->

Limitations

This code, while functional, opens the booking page in an overlay covering the website. If you'd like to keep the booking page within your website, embedding it via an iFrame is a better solution.

How to embed the booking page using iFrame

Step 1: Get your booking page URL

Find the URL of your booking page. For example:

https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8

Step 2: Create the iFrame code

Write a standard HTML <iframe> element using your booking page URL. Recommended attributes:

Width: Set to 100% to make the iFrame responsive.
Height: A height of 800px works well for most booking pages. Adjust based on your page design.
Style: Set border: none for a cleaner look.

Step 3: Embed the iFrame code into your website

Paste the iFrame code into your HTML where you want the booking page to appear:

<iframe
  src="https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8"
  width="100%"
  height="800"
  style="border: none;">
</iframe>

Full example: Timerise SDK and embedded iFrame

Here's how your full HTML file might look with the Timerise SDK and the embedded iFrame:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Timerise Booking Page</title>
</head>
<body>
  <h1>Book Your Service with Timerise</h1>

  <!-- Embedded Timerise Booking Page -->
  <iframe
    src="https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8"
    width="100%"
    height="800"
    style="border: none;">
  </iframe>

  <hr>
  <p>Alternatively, use the default Timerise JS SDK buttons:</p>

  <!-- Timerise JS SDK Buttons -->
  <button class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</button>
  <a href="https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8"
     class="timerise-button"
     data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</a>

  <!-- Timerise JS SDK -->
  <script src="https://api.timerise.io/sdk/M8ACgxzgyARAqDebMEzp/script.js?v=1"></script>
  <!-- end Timerise JS SDK -->
</body>
</html>

Benefits of using iFrame for Timerise booking pages

Seamless integration: Keeps the booking page within your website.
User-friendly: Users stay on your site, improving the overall experience.
Customizable: Adjust the size and style to match your design.

For additional customization or troubleshooting, contact Timerise support or refer to the Timerise developer documentation.