Skip to main content
Embedding Bookwhen within your WordPress website

How to embed your Bookwhen schedule on your WordPress site

Eloise avatar
Written by Eloise
Updated over 3 months ago

This article covers:


Locating your iframe embedding code

You can find your iframe code within your Public page by selecting Customise Page in the top right-hand corner:

The left-hand side contains the automatically generated HTML codes for a Button link, a Standard link, and an Embedded iframe.

Select Embedded iframe and copy the code in the box:


Installing an iframe plugin

Bookwhen currently uses an iframe integration to add your schedule page to your website. WordPress does not support iframes directly in their editor section. However, installing an iframe plugin onto your WordPress account makes it easy to add your iframe.

Review the list of iframe plugins for WordPress. Locating an iframe plugin is also demonstrated below.

๐Ÿ’ก To note: You can only install plugins onto your WordPress if you have a Business or eCommerce WordPress plan.


Embedding the iframe on your website

Once you have your chosen iframe plugin installed, you will then be able to paste your copied embedded iframe into your page via your iframe plugin whilst in edit mode.

Below is a helpful video demonstrating using the plugin called iframe by webvitality. From 1.12 - 2.05, you can learn how to install the plugin and paste your embedded iframe into your page. You will not need to use the plugin's shortcode; you can paste your copied embedded iframe into a new text box section.


Other information about the iframe

  • The iframe is fully mobile responsive and should work on any device. For the best performance on mobile, we recommend keeping the event names and descriptions as short as possible to prevent the need for scrolling.

  • 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.

  • If you wish to pre-filter your iframe, you can learn how to do so here.

  • If you have any issues with your iframe's appearance on the page, it is most likely due to another element interfering with the code. We recommend getting in touch with your website manager to troubleshoot further.

Troubleshooting the iframe button codes

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 Wordpress, 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: WordPress, WP, embed, embedding, iframe, plugin, widget, integrate, integration

Did this answer your question?