Embedding your booking page, also known as a self-scheduling page, into other pages on your site makes it easy for visitors to book time with you without leaving the page they’re on. For example, you might add your calendar to a promotional page about your services so potential clients can schedule right away without any extra clicks.
In this article, you’ll learn how to embed your booking page on any Ontraport page using a few simple code snippets. We’ll walk you through what you need and exactly where to place each snippet so you can offer self-scheduling on any page on your site.
Table of contents
Embed your booking page
• Customize first code snippet
• Customize second code snippet
• Customize third code snippet
Embed your booking page
You can embed your booking page on other Ontraport pages. For example, you can set up your calendar to appear on the page that promotes your appointments.
You’ll need to add three snippets of code to make this work.
Two of them go on the page where you want to embed your booking page, and the first goes on the thank you page users see after they fill out your booking page.
Before you customize the code below, make sure you have:
- The URL of your booking page
- The URL of the page where you’ll embed the booking page
- The URL of the thank you page visitors will see after booking
Customize first code snippet
- Edit the page you want to embed your calendar on.
- Access your page’s custom code and add the following script to the header section.
- Replace DOMAIN OF YOUR PAGE and use the domain of the page you’re hosting the embedded booking form on. For example, if your page is hosted at https://mypage.com/book-me-now, then use https://mypage.com.
| <script> window.addEventListener('message', function(event) { // Verify the origin of the message if (event.origin === "DOMAIN OF YOUR PAGE") { // The domain from which the iframe is loaded if (event.data.type === 'redirect' && event.data.url) { // Perform the redirection window.location.href = event.data.url; } } }, false); </script> <style> .iframe-container { position: relative; width: 100%; height: 100vh; } .iframe-container iframe { width: 100%; height: 100%; border: none; overflow: hidden; } </style> |
Customize second code snippet
Add a Custom HTML element to your embed page and add this code to it.
- Replace YOUR BOOKING PAGE URL GOES HERE with the URL of your booking page.
| <div class="iframe-container"> <iframe id="myIframe" src="YOUR BOOKING PAGE URL GOES HERE" allow="cross-origin"></iframe> </div> |
Save and publish your embed page.
Customize third code snippet
The final step is to edit your thank you page and add the third code snippet.
- Edit your thank you page.
- Access your page’s custom code and add the following snippet to the header section.
- For the URL OF YOUR THANK YOU PAGE, use your full URL. For example, https://mypage.com/thanks.
- For the DOMAIN OF YOUR THANK YOU PAGE, only include the root URL, not the page or folders, such as https://mypage.com.
| <script> window.onload = function() { // Post a message to the parent window window.parent.postMessage({ type: 'redirect', url: 'URL OF YOUR THANK YOU PAGE' // URL of your thank you page }, 'DOMAIN OF YOUR THANK YOU PAGE'); // Specify the origin of the parent page for security }; </script> |
