This article covers:
Locating your button link, URL link and embedded iframe code
To find your page links:
Open your Public page, then select Customise page in the top right corner:
There are three options under the HTML code for your page section:
1. Button link
Select Button link and copy the code for a Book Online button that you can use on your website to link directly to your schedule page.
2. Standard link
Select Standard link, then copy the code to add an embedded URL link to your website. You can amend the text that appears between the "> and </a> sections:
<a href="https://bookwhen.com/example">Book online</a>
The link will then appear like: Book online.
3. Embedded iframe
Select Embedded iframe, then copy the code to embed iframe in your website. When pasted, your schedule will appear on your website, and customers can book events through the iframe.
💡 To note: If you have set an alert message on your public page, the iframe will display it within the iframe. It will not display the banner, logo, or title section.
Embedding your schedule on a specific website provider: Wix, Squarespace and WordPress
💡 To note: The Bookwhen team writes these articles, and we aim to keep them up to date. However, embedding processes may have changed since they were written.
Filtering the iframe
If you'd like to embed an iframe for a specific event, you’ll need to use the URL extension from the View details page of that event.
To find this:
Open the public page and select the event.
Select View details by the event on the right-hand side of the screen:
You can find the URL extension in the address bar:
The URL extension then needs to be inserted into the iframe code. In the example below, the event-specific extension is shown in bold:
<iframe src="https://bookwhen.com/example/iframe/e/ev-snsh-20231027110000" frameborder="0" scrolling="yes" seamless="seamless" style="display:block;border:none;width:100%;height:900px;"></iframe>
Resizing the iframe
💡 To note: Resizing the iframe requires additional coding. If you're unfamiliar with coding or not a web developer, we recommend contacting someone who can assist with this step.
Auto-resizing
To enable auto-resizing, you can include a script linked to:
📌 https://cdn.bookwhen.com/js/iframe_resizer.js
Alternatively, you can write your own script based on the code in the link above. The script allows Bookwhen’s iframe to send a message to the parent window with data that includes the height of the iframe content. You can use this data to adjust the height as needed or insert our script to handle it automatically — no extra coding required!
Changing the iframe language
You can change the language in the iframe by updating the public page link to its localised version.
For example:
Instead of using:
📌 https://bookwhen.com/flowandbalance/iframe
Use the localised version:
📌 https://bookwhen.com/de/flowandbalance/iframe
Adding /de switches the iframe to German. You can replace this with other language codes as needed.
Complete Code Example:
<iframe src="https://bookwhen.com/de/flowandbalance/iframe" frameborder="0" scrolling="yes" seamless="seamless" style="display:block;border:none;width:100%;height:900px;"></iframe>
Language codes
Danish:
daDutch:
nlEnglish (British):
en-GBFrench:
frGerman:
deHungarian:
huItalian:
itNorwegian:
noPolish:
plSpanish:
esSwedish:
sv
Example links:
Danish | |
Dutch | |
French | |
German | |
Hungarian | |
Italian | |
Norwegian | |
Polish | |
Spanish | |
Swedish |
Embedding the Passes page
To embed the Passes section of your public page, insert 'passes' into the iframe URL. For example:
<iframe src="https://bookwhen.com/example/iframe/passes" frameborder="0" scrolling="yes" seamless="seamless" style="display:block;border:none;width:100%;height:900px;"></iframe>
This ensures the Passes section appears first in the embedded iframe. However, customers can still switch between Passes and other schedule sections:
Embedding the Memberships page
To embed the Memberships section of your public page, insert 'memberships' into the iframe URL. For example:
<iframe src="https://bookwhen.com/example/iframe/memberships" frameborder="0" scrolling="yes" seamless="seamless" style="display:block;border:none;width:100%;height:900px;"></iframe>
This ensures the Memberships section appears first in the embedded iframe. However, customers can still switch between Memberships and other schedule sections.
Important notes about the iframe
💡 To note: The iframe only displays your schedule, events, and alert banner. It does not include banner images, buttons, the footer, or any other additional edits on your page.
Iframe vs API
Check out the differences between the iframe and API features and iframe limitations.
Website Builder Compatibility
Some website builders, such as Wix and GoDaddy, treat embedded links as iframes, which may cause issues with the Button link and Standard link not working as expected.
These builders often require links to open in a new tab or window.
If your links are not working correctly, try using an amended HTML code with
target="_blank", which ensures the link opens in a new tab.
Example adjustments:
Button link
Default:
<a href="https://bookwhen.com/example" title="Book online"><img src="https://d1abtw6bgq2xi2.cloudfront.net/images/bookonline_button.png" alt="Book online" style="width:105px;height:22px;" /></a>
Amended (opens in a new tab):
<a href="https://bookwhen.com/example" target="_blank" title="Book online"><img src="https://d1abtw6bgq2xi2.cloudfront.net/images/bookonline_button.png" alt="Book online" style="width:105px;height:22px;" /></a>
Standard link
Default:
<a href="https://bookwhen.com/example">Book online</a>
Amended (opens in a new tab):
<a href="https://bookwhen.com/example" target="_blank">Book online</a>
💬 Need extra help?
For the quickest response, contact us via live chat on our homepage or your account. Buddy, our trusty chatbot, will assist first and pass you to a support team member if needed.
Prefer email? Send us an email instead.
Thank you! 🕺
Tags: embedding, embed, website, iframe, integrate, integrating, class, class pass