In 2020, we rolled out a brand new Online Booking Engine and are so excited about it! Check out this blog post to learn more about its great features. Here, we will walk you through the steps of integrating the Zaui Online Booking Engine onto your website to get those online sales rolling in!
This article will cover the following topics:
- New Terminology
- What To Do First
- How to integrate
- Linking to WordPress - Video Tutorial
- Linking to Squarespace sites - Video Tutorial
- Adding Specific Booking Date to URL
New Terminology Related to the Online Booking Engine
Theming: In the Portal settings, which can be found under Settings > Manage Internet Bookings > Manage Portals (ie - Default), there is a section labelled Internet Booking Branding Management. You can select a font, primary colour, secondary colour and the call to action colour for your Zaui Online Booking Engine.
Booking Embed and Widgets: This page can be found under Settings > Manage Internet Bookings > Booking Embed and Widgets. You will be able to select from which portal, which view, and how you would like to embed the booking engine into your website from this page.
- In the Booking Embed and Widgets page, select the Portal you would like to preview and embed.
- User Experience references which page the booking engine will link to. Below are examples of what the available pages display:
- Single Item Page: Activity specific or package-specific page. Example: https://demolabs.zaui.net/booking/web/#/default/activity/40
- All Categories: Home page of new OBE showing all system categories. Example: https://demolabs.zaui.net/booking/web/#/default/activities
- Single Category: Link to category (activity group) page which can host multiple activities. Example: https://demolabs.zaui.net/booking/web/#/default/activities/category/8
- Single Category Calendar: *New Feature* This page will show all activities in a calendar view and list activities in chronological order. Example: https://demolabs.zaui.net/booking/web/#/default/activities/category/8/availability
- Transportation: This page will link directly to the point to point page to select your to and from routes (if you are a Transportation company). Example: https://demolabs.zaui.net/booking/web/#/default/p2p?roundTrip=1
- Gift Certificate: This page will link directly to the gift certificate purchase page. Example: https://demolabs.zaui.net/booking/web/#/default/gift-certificate
- Embedding Method references how the booking now button will populate on the Online Booking Engine. Below are the available methods:
Embedded Button Overlay This references an iFrame that populates as a modal window on top of your website. This is the preferred method of integration. Button HTML This is a redirect page, customers will be taken off of your website with this integration. Direct Link This will populate a link for the booking engine; you can use this to give commission or wholesale agents a specific link to the booking engine.
What To Do First
Before the booking engine is ready to be integrated onto your website, please make sure the following has been done:
- 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.
- Match branding to your website theme. If you would like to customize font colours for Zaui’s new Online Booking Engine, you can do so by clicking on the Portal Name and scrolling down to the Internet Booking Branding Management section. Here, you will be able to match the primary colour, secondary colour, and call to action fonts to your website colours.
- Images. Since this is an image-heavy booking engine, Activity, Category, Package, and Product images are imperative. 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.
- Activity Description, More Info, Policy: Include an activity description, any additional activity information, and 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.
- In your Zaui system, select Settings > Manage Internet Bookings > Booking Embed and Widgets.
- Select the User Experience and the Embedding Method.
- If necessary, click on advanced options. Included in advanced options are:
Default Activity Date If the activity does not start until a date in the future, you can add a date here for the booking engine to be linked to as the first available activity date. Auto-apply Promo Code The ability for the promo code to automatically redeem upon check-out. Affiliate Link The ability to link directly to a commission company or an agent ID in order to auto-apply commission upon check-out.
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.
If you require any assistance with these above steps, don't hesitate to contact us at email@example.com.
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.
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 Embeded Code, insert the start date you would like (anywhere within the URL) as follows:
&date=year-month-date (ie - &date=2021-06-02)