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:

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: