Skip to main content
Embedding Bookwhen within your website

Add your Bookwhen public schedule to your website

Eloise avatar
Written by Eloise
Updated over 3 months ago

This article covers:


Locating your button link, URL link and embedded iframe codes

To find your page links, open your Public page, then select Customise page in the top right corner:

You will then find a section called HTML code for your page with three options:

1. Button link

Select this option, then copy the code for a Book Online button that you can add to your website link to your schedule page:

2. Standard link

Select this option, then copy the code for an embedded URL link to your schedule page. You can amend the text that is displayed here in bold:

<a href="https://bookwhen.com/example">Book online</a>

The link will then appear like: Book online.
​

3. Embedded iframe

Select this option, then copy the code for your embedded iframe. When pasted into your website, this option will embed your schedule page into your website.

πŸ’‘ To note: The iframe will not include the banner, logo and title section of your public booking page or on your website. You also cannot change the background colour of the iframe. However, it does include the alert message banner.


Embedding your schedule on a specific website provider:

πŸ’‘ To note: The Bookwhen team writes these guides. Although we try to keep these up-to-date, these providers may have changed their embedding processes since they were written.



Filtering the iframe

If you'd like to embed your iframe for a specific event, you will need to ensure that you insert the URL extension from the View details page of the required event:

To do this. Select the event you'd like to share, then View details from the right-hand side:

You can find the URL extension in the address bar:

The URL extension then needs to be inserted into the iframe as shown here in this example 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

Please note that resizing the iframe requires additional coding. If you aren't familiar with coding/aren't a web developer, we recommend that you reach out to one to help with this step.

Auto-resizing

You auto-resize the iframe by including a script linked to https://cdn.bookwhen.com/js/iframe_resizer.js.

Alternatively, you can write your own script based on the coding in the above link. The above javascript file explains that Bookwhen sends a message from Bookwhen's iframe to the parent window with data that includes the height of the iframe content as a number. You can use that however you wish, or you can insert our script to do it without needing to code it. πŸ•Ί


Changing the iframe language

You can change the language in the iframe by amending the public page link to the one with the localised version.

β€Œ

For example:

Instead of using:

In the iframe embed code, you can use:

Which includes '/de' for the German version.

β€Œ

Here's the 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: da

  • Dutch: nl

  • English (British): en-GB

  • French: fr

  • German: de

  • Hungarian: hu

  • Italian: it

  • Norwegian: no

  • Polish: pl

  • Spanish: es

  • Swedish: sv

Example links:


Embedding the Passes page

To embed the Passes section of your public page, you'll need to insert the word 'passes' into the iframe as shown in the below example in bold:

<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 section will then appear first on the embedded iframe. However, customers will be able to switch between the passes and the other schedule sections:
​


Embedding the Memberships page

Similar to embedding the passes page, to embed the Membership section of your public page, you'll need to insert the word 'memberships' into the iframe as shown in the below example in bold:

<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 section will then appear first on the embedded iframe. However, customers will be able to switch between the memberships and the other schedule sections:


Important note about the iframe

The iframe will only display your schedule, events and alert banner. It doesn't include banner images, buttons, the footer or any other additional edits on your page.

In some website builders, the default HTML codes for "Button link" and "Standard link" may not work as expected. This is because certain builders, like Wix and GoDaddy, treat these links as iframes, which requires them to be opened in a new tab or window.

If you encounter issues with the links not functioning correctly, try using an amended version of the HTML code that includes target="_blank", which forces the link to open in a new tab.

An example of how to adjust the code:

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:

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

Amended:

<a href="https://bookwhen.com/example" target="_blank">Book online</a>


πŸ’¬ Any questions or feedback? There are two ways to get in touch:

Thank you! πŸ•Ί

Return to the top ⬆️


Tags: embedding, embed, website, iframe, integrate, integrating, class, class pass

Did this answer your question?