This article covers:
Locating your iframe embedding code
To find your iframe code:
Open your Public page and select Customise Page:
Find the HTML code for your page section, containing the 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 uses an iframe integration to embed your schedule page on your website. However, WordPress does not support iframes directly in its editor.
You must install an iframe plugin on your WordPress account to add your iframe to WordPress. This is only available to those on a business or e-commerce WordPress plan.
Embedding the iframe on your website
Once you've installed your chosen iframe plugin, you can paste your copied iframe code into your page while in edit mode.
📹 Helpful video: The video below demonstrates how to use the iframe by webvitality plugin:
💡 From 1:12 - 2:05, it shows how to install the plugin and paste your iframe into your page. You can paste your iframe directly into a new text box section instead.
Other information about the iframe
The iframe is fully responsive to mobile devices and should work on any device. To maximise the mobile experience, we recommend keeping event names and descriptions short to minimise scrolling.
The iframe only displays your schedule, events, and alert banner. It does not include banner images, buttons, the footer, or any other custom page edits.
Troubleshooting appearance issues: If your iframe doesn't display correctly, another element on your website may be interfering with the code. We recommend reaching out to your website manager for troubleshooting.
Troubleshooting the iframe button codes
Some website builders, such as WordPress, may treat the Button link and Standard link codes as iframes. This can cause issues, requiring the links to open in a new tab or window.
Fix: If your links aren’t working as expected, use an amended version of the HTML code with
target="_blank"to ensure they 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 (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: WordPress, WP, embed, embedding, iframe, plugin, widget, integrate, integration