Overview
Embedding Timerise’s booking page on your website is a straightforward process using the Timerise JavaScript SDK. This guide will walk you through the steps to seamlessly integrate your booking system into your website with just a few lines of code, allowing customers to view and book your services directly.
Step 1: Set Up the Embed Code
You can start by adding the following embed code to your HTML page. This code initiates the Timerise SDK, making your booking page accessible through an embedded iframe on your site.
1. Go to Timerise’s CodePen example to see a live example and how the code works in real time.
2. Copy the following code and paste it into your website’s HTML where you want the booking page to appear.
<html>
<head>
<title>Embed Timerise Booking Page</title>
<script src="https://sdk.timerise.io/sdk.min.js"></script>
</head>
<body>
<div id="timerise-booking"></div>
<script>
Timerise.init({
projectId: "YOUR_PROJECT_ID", // Replace with your actual project ID
element: document.getElementById("timerise-booking"),
serviceId: "YOUR_SERVICE_ID", // Optional: specify a service ID if embedding a specific service
theme: "light", // Optional: choose between 'light' and 'dark' themes
});
</script>
</body>
</html>
Step 2: Configure Parameters
Customize the embed code by replacing placeholders with your specific details:
• projectId: This is required and uniquely identifies your Timerise project.
• serviceId (optional): Use this if you want to embed a specific service. Omitting this will display the general booking page for all services in your project.
• theme (optional): Choose between "light" and "dark" themes to match your website’s style.
Step 3: Additional customization options
The Timerise SDK provides more customization options for enhanced control and user experience:
• Locale: Display the booking page in multiple languages by setting a locale parameter, such as "en" for English or "es" for Spanish.
• Payment Integration: Timerise supports payment providers like Stripe, allowing you to accept payments directly on your booking page.
• Booking Flow Configuration: Control booking confirmations, cancellations, and rescheduling options from within the Timerise Admin app to streamline the customer journey.
Step 4: Testing and troubleshooting
1. Test the embedded booking page in different browsers and devices to ensure it appears as expected.
2. Ensure you have a valid projectId and, if needed, serviceId. Errors may indicate missing or incorrect IDs.
3. Refer to the Timerise SDK documentation for additional options and troubleshooting tips.
Conclusion
Embedding the Timerise booking page via the JavaScript SDK is a quick and flexible way to bring your booking interface directly to your users. For more advanced customizations, such as integrating with other Timerise API features, please consult the Timerise API Documentation.