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><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>
<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!