• Login

5.1 iFrame Integration

Our system has two main ways to integrate with your website, a WordPress iFrame Plugin or a direct iFrame integration. To learn how to integrate with a WordPress based website, click here.

Where can I get the iFrame integration link?

You can get the iFrame link in two places.

The first is from your system in the Dashboard. It is located on the bottom right of the page under the Development Tools.

iFrame integration

 

 

 

 

If you click on it, it will open up a new page where you can get the URL of the iFrame. You can even right click to copy the link without the need to open it. You can then place this iFrame link on your website.

The second place is from your Branches in the settings highlighted in orange in the picture below.

The different links are for the different type of reservation processes. For example, you will use “public link for reservations” if you do not have the additional package module enabled. If you click on it, it will open up a new page where you can get the URL of the iFrame. You can even right click to copy the link without the need to open it. You can then place this iFrame link on your website.

In this example below, we use GoDaddy website builder to show how the iframe integration works on an HTML page. For other types of websites, the process is very similar.

Step 1

Go to the website editor and select the HTML code widget highlighted in orange in the picture below. In general should be on the panel of widgets, common names for this are “HTML Code” or “Embed HTML”.

 

Step 2

Navigate to Settings > Branches and copy the URL of the “Public Link for Reservations” located on the right side of the page, highlighted in orange in the picture below.

 

Step 3

In the HTML Code editor, add the following code replacing the source attribute (src) with the previously copied URL in Step 2.

You can copy the code below.

<iframe id="hq-rental-iframe" width="1260" height="1800" frameborder="0" src="add your link here"></iframe>

 

Step 4

Finally, on the bottom of the page add the following code to add the resize function to the iFrame. This is crucial to make the workflow more mobile friendly.

You can copy the code below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js" integrity="sha256-NZjCYaMfryuJQRMgekHuC02c/Wv4sMRzHG2zyhrVwKU=" crossorigin="anonymous"></script>
<script type="text/javascript">
iFrameResize({
log: false,
checkOrigin: false,
maxWidth: screen.width,
sizeWidth: true }, "#hq-rental-iframe");
</script>

<style>
#hq-rental-iframe{
width: 1px;
min-width: 100%;
border: none;
}
</style>

 

To learn how to do custom styling for your reservation form to suit your website, follow this link here.

Safari & Opera Browser

Due to an incompatibility with Safari and Opera browsers, the domain name of the iFrame has to be updated. You will need to add an A record in your DNS records where the value is the name of your tenant. For example, if your link is rentals.caagcrm.com the value for the A record has to be “rentals” and the IP address will be dependent on your installation:

America: 45.79.176.147
Europe: 45.77.139.237
Asia: 139.162.30.137

Once you have created the A record please create a support ticket inside the HQ application so our team can proceed with the installation.