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.

Option 1: Getting Started Dashboard

The first is from your system in the Getting Started Dashboard. It is located on the far right column of the page under the Development Tools.

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

Option 2: Company Branches

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

The different links are for each type of reservation processes. For example, you will use “public link for reservations” for regular reservations. If you have the additional package module enabled, then you may use the public link for packages. If you click on these links, they will open up a new page where you can get the URL of the iFrame that applies. You can also right click to copy the link without opening it, and then paste the iFrame link on your website.

In this example below, we used the GoDaddy website builder to show how the iframe integration works on an HTML page. Please note that 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. IGenerally, this should be on the panel of widgets. Some common names for this are: “HTML Code” or “Embed HTML”.

 

Step 2

Navigate to Settings > Company Branches and copy the URL of the “Public Link for Reservations” located on the right side of the page, as 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/4.1.1/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 or rentals.hqrentals.app 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.