Rezfusion Hub allows you to drop your channel script (compiled tag) into your website to show a quick search widget, full search, details page, and booking confirmation.
This guide is not intended to replace a full setup and may not work for your website depending on pages and url path in your specific setup.
Let’s begin
...
The Hub booking engine script is: https://assets.rezfusion.com/fort-lauderdale-staysbluetent/channels/httpsrezfusion-fortlauderdalestaysq4-democomhttpswwwrezfusionhubdemocom/bundle.js
You can see your actual script in your Hub Channel, and Compile Tag.
...
Setting up the search page
First, let’s add Hub’s powerful search page to your website. Your website needs a page (url path) for the search to live. For this example we will use: /searchvacation-rentals
Add this page to your website’s main navigation. You want guest to go to this page and search your properties.
...
| Code Block |
|---|
<div id="app"> <script src="https://assets.rezfusion.com/fort-lauderdale-staysbluetent/channels/httpsrezfusion-fortlauderdalestaysq4-democomhttpswwwrezfusionhubdemocom/bundle.js" type="text/javascript"></script> </div> |
The id=”app” is what tells Rezfusion Hub that is where it should display your search experience. Only the ID changes, the script is always your compiled script for the channel in Hub.
...
Setting up the details page
This is very similar to the search page with a few differences. Your website needs a page (url path) for the property details to live. For this example we will use: /vacation_rentalsdetails
This page does not live in your navigation. You just need it published and live.
...
| Code Block |
|---|
<div id="details-page"> <script src="https://assets.rezfusion.com/fort-lauderdale-staysbluetent/channels/httpsrezfusion-fortlauderdalestaysq4-democomhttpswwwrezfusionhubdemocom/bundle.js" type="text/javascript"></script> </div> |
The id=”detail-page” is what tells Rezfusion Hub that is where it should display a property details page. Only the ID changes, the script is always your compiled script for the channel in Hub.
...
Adding a quick search widget to your homepage
With Hub, you can add your channel’s quick search widget to any page. In this example, we will add it to our homepage.
...
| Code Block |
|---|
<div class="quick-search"> <script src="https://assets.rezfusion.com/fort-lauderdale-staysbluetent/channels/httpsrezfusion-fortlauderdalestaysq4-democomhttpswwwrezfusionhubdemocom/bundle.js" type="text/javascript"></script> </div> |
...
| Code Block |
|---|
<style>.quick-search * {box-sizing:border-box}</style> |
...
Adding a booking confirmation to your website
Following the exact same steps from details page section above by only changing “details-page” to “booking-confirmation” will allow your website to show guests a booking confirmation.
...
| Note |
|---|
You will not be able to test Hub booking engine secure payment service with this test script. You will need your own Hub account to test secure booking. This is only for installation guidance. |
| Code Block |
|---|
<div id="booking-confirmation"> <script src="https://assets.rezfusion.com/bluetent/…channels/httpswwwrezfusionhubdemocom/bundle.js" type="text/javascript"></script> </div> |
...