How to embed the booking widget into a responsive website

If you have a responsive designed 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.

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:

Note: 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://subdomain.phorest.me/book" width="900" 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

For using a web builder you only need to insert the iFrame code into a HTML block or code snipper section

To be inserted in HTML Block: 

<section>
<div class="iframe-container">
<iframe src="https://subdomain.phorest.me/book" width="900"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%;
}

 

 

Was this article helpful?
0 out of 0 found this helpful