If you have a responsive website created for the optimum viewing experience across a wide range of devices then it's possible to embed the Phorest online booking iframe so it too will resize itself to provide easy navigation and reading on any sized device.
Note: We do not recommend the use of iFrames on websites over the floating Book Now widget, because the floating Book Now widget is typically considered a better user experience overall which will help with online booking conversion rates. For more information on setting up the floating Book Now widget, check out this guide.
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
You will need to update the subdomain in the following HTML coding to your subdomain. You can find your subdomain at the end of your online booking direct link.
Responsive iframe in Raw HTML
<!DOCTYPE html>
<html>
<head>
<title>
iframe testing
</title>
<meta name="description"/>
<meta name="author"/>
<style>
.iframe-container {
position: relative;
height: 800px;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header></header>
<section>
<div class="iframe-container">
<iframe src="https://www.phorest.com/salon/subdomain" width="100%" height="800" frameborder="0"></iframe>
</div>
</section>
<footer></footer>
</body>
</html>
Having done this, the online booking widget will now resize with the screen’s width.
Integrating a responsive iFrame on a Web Builder CMS
If you are using a web builder, you only need to insert the iFrame code into a HTML block or code snippet section.
To be inserted in HTML Block:
<section>
<div class="iframe-container">
<iframe src="https://www.phorest.com/salon/subdomain" width="100%"height="800" frameborder="0"></iframe>
</div>
</section>
To be inserted in Styling/Custom CSS section:
.iframe-container {
position: relative;
height: 800px;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}