How to Link the Zaui Booking Engine to your Website

Overview

For an overview of Zaui's booking engine, we first recommend checking out this article: Using Booking Embed and Widgets.

This article will cover the following topics:

• What To Do First
• How to integrate
• Adding Specific Booking Date to URL
• Linking to WordPress - Video Tutorial
• Linking to Squarespace sites - Video Tutorial 
  

What To Do First 

Before the booking engine is ready to be integrated onto your website, please make sure the following has been done:

1. Create portals if required. Most companies will use the Default portal. If you need to create a separate portal, please check out this support article.
2. Match branding to your website theme. In order to customize font colours for Zaui’s Online Booking Engine, click on the Portal Name and scroll down to the Internet Booking Branding Management section. Here, you will be able to match the primary colour, secondary colour, and font colours to those of your website.
3. Images. Activity and Activity Category images are imperative, as are Package, and Product images if you offer them. Images should be approximately 700 px wide. Images will be resized accordingly however small image sizes will be blurry. It is better to have a larger-sized image than too small.
4. Activity Description, More Info, Policy: Include an activity description, any additional activity information, and an activity-specific cancellation policy if needed. 

How To Integrate the Zaui OBE Onto Your Website

Here, you will learn how to link your website's Book Now buttons so they redirect the customer to your Zaui Online Booking Engine. 

1. In your Zaui system, select Settings > Online Bookings > Embeds and Widgets. 
2. Select the User Experience and the Embedding Method. 

Most companies will want to use a combination of All Categories or the All Category Availability Calendar for the general 'Book Now' button, plus single item pages as a direct link to book a specific activity.

User experience options include:

For a quick preview of what each user experience would look like on your booking engine copy the link above and replace 'demolabs' with your Zaui system name.

3. If necessary, click on advanced options. Included in advanced options are:

Once the link is designed, scroll down to Implement and Embed.

The Step 1 script will need to be posted in your website's header:

The Step 2 script (or part of the script depending on the content management system you are using) will need to be included for all Book Now buttons.

Adding a Specific Booking Date to the URL

The Zaui Online Booking Engine will default to today's date when a customer goes to book. If you would like to open sales for tour dates in the future and don't want your customers to have to click through months in the calendar to find your start date, you can include a specific date in your URL so that the Booking Engine defaults to that date. 

• Within your Embedded Code, insert the start date you would like (anywhere within the URL) as follows: &date=year-month-date (ie - &date=2021-06-02)

You will need to ensure you remove this date so the booking engine is changed back to the "day of" bookings made during your operating season.

Linking to WordPress - Video Tutorial

If you use WordPress as your content management system for your website, check out this video for step-by-step instructions on linking to the Zaui Online Booking Engine. 

Linking to Squarespace - Video Tutorial

If you use Squarespace as your content management system for your website, check out this video for step-by-step instructions on linking to the Zaui Online Booking Engine.