Skip to main content
All CollectionsDevelopment
Embedding Timerise booking page
Embedding Timerise booking page

This article describes how to embed the Timerise booking page on your website.

Updated over 2 weeks ago

How to embed your Timerise booking page using HTML and an iFrame generator

This article will guide you on how to embed your Timerise booking page into your website using HTML and the iFrame generator from iframecloud.com. Additionally, we will explain how to work with the provided Timerise JS SDK code, which, by default, opens the booking page in a new browser tab.


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>&lt;button&gt; - <button class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</button></p>
<p>&lt;a&gt; - <a href="https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8"class="timerise-button" data-service-id="Y1FFTLuSUtppw30QaRh8">Open booking page</a></p>
<p>&lt;img&gt; - <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>
<hr height="1" color="#000000" style="margin-top:48px;">
<p>Timerise © 2025</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. In the example above, the URL is:

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


Step 2: Generate iFrame Code Using iframecloud.com

1. Go to iframecloud.com.

2. Paste your booking page URL (https://booking.timerise.io/service/Y1FFTLuSUtppw30QaRh8) into the iFrame generator tool.

3. Customize the following options:

Width: Set to 100% to make the iFrame responsive.

Height: For most booking pages, a height of 800px works well. You can adjust this based on your page design.

Border: Disable the border for a cleaner look by setting it to none.

4. Generate the iFrame code and copy it.

Step 3: Embed the iFrame code into your website

Paste the generated iFrame code into your HTML where you want the booking page to appear. Here’s an example:

<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 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. Happy embedding!

Did this answer your question?