In some cases, you may wish to resize the iframe (if you use the iframe to embed your schedule into your website) for reasons such as it's showing a scroll bar or there is a lot of blank space.
This article covers:
How does the iframe work?
The size of the iframe is automated. To explain this further, web browsers provide a secure way to exchange information (referred to as "messages") between an iframe (your Bookwhen public page) and the web page it's embedded in (your website).
Bookwhen uses this method to communicate the size of the public page whenever it changes.
👉 This means that all your website needs to do is "listen" for these "messages" and will adjust the height of the iframe to match the dimensions of the public page to ensure it displays properly within your website.
Sometimes, due to your website and your Bookwhen public page being on different domains, your website can't always detect the height of the iframe contents and therefore adjust the manually-set height as it changes. (This is due to security features built into web browsers).
Resizing script
We provide a JavaScript file that does the resizing for you. Add the below JavaScript HTML script on your page, and your iframe will resize its height whenever the contents change:
<script src="https://cdn.bookwhen.com/js/iframe_resizer.js"></script>
💡 Please note: You'll need back-end access to edit your site code, as you'll need to enter this script alongside the iframe code directly before or after in either the <head> or <body> elements.
ℹ️ If you are a web developer or have a web developer administering your site:
All you need is the URL of our JavaScript file: https://cdn.bookwhen.com/js/iframe_resizer.js
If you are currently using a website builder (Wix, Squarespace, Godaddy, etc.), find the area where you can add "scripts" or "JavaScripts" and add the above URL.
You may also write your own script that "listens" for the messages sent by the iframe.
💡 Note for non-developers: If you are worried about sending Bookwhen data, please be assured that nothing happens if you don't listen 'for' these messages. It all goes into a 'void'. Browsers know to erase anything that gets "sent" but isn't "listened" for.
✨ You can find more information on where to add this on a WiX site here.
💬 Any questions or feedback? There are two ways to get in touch:
For a quicker response, please contact us via live chat on our homepage or your account.
Or send us an email
Thank you! 🕺