We're excited to announce our new Activity Booking Widget!
With this new feature, you can seamlessly integrate a booking link directly onto your website, giving your guests instant access to the activity calendar. The mobile and desktop-friendly Activity Widget streamlines the booking experience, allowing your guests to easily reserve their preferred activities directly from your site.
View an example of the Activity Widget Here
This article will cover the following:
- Setting Up an Activity Widget
- Embedding the Activity Widget Code Onto Your Webpage
- Customizing/Branding the Activity Widget
Setting up an Activity Widget
- In your Zaui system, go to Settings > Online Bookings > Embeds and Widgets.
- Select the portal you want to generate the widget for.
- Under User Experience Select Activity Widget for Standard, Interval, Rental or Ticket type activities.
The activity widget is designed to be used on a tour-specific page on your website, therefore when the activity widget is selected from the user experience drop down, the activity is also required.
-
Choose your Embedding Method, you have two choices:
a. Embedded Overlay Button will open the booking engine in an iframe* (recommended)
b. Button HTML will open the booking engine in a new tab
* desktop behaviour only. Mobile behaviour is the same regardless of the chosen embedding method
Use Advanced Options to add additional parameters to the links you are creating:
- Default Activity Date: Add this parameter for situations where activities are available for booking before the seasonal start date. This will bring the user to the first available date if they are looking to book ahead of time. After this date passes, they will be directed to the current, or next available date.
- Auto-apply Promo Code: Add this parameter so that when qualifying activities are added to the cart, the promo code is automatically applied to the booking.
- Affiliate Link: Use this parameter to generate a unique link that will automatically attribute the booking and apply commission upon check-out. This setting should only be used in conjunction with an activity widget when the widget will be embedded into and hosted on a reseller's website Check out this article for more information.
Adding the Activity Widget Code onto a Webpage
Once you have selected the activity and any advanced options, scroll down to Implement and Embed section at the bottom of the page.
The Step 1 script will need to be posted in your website's header:
The Step 2 code will need to be added inside an element on the appropriate page of your website.
|
For more information and a video guide on linking the online booking engine to your website, head over to this article |
Embedding Steps for Wordpress
|
The following steps should be completed by the person who manages your website |
- Log in to the back end of your website and navigate to the page that hosts the tour/activity you want to embed the booking widget into.
- Use your website builder tool (such as Elementor) to add a new section that will allow you to place the booking widget exactly where you want it on the webpage.
- Then click the + to add the element that will be contained inside the section. In this case, add a new html element
- Copy the embed code from Zaui and paste it into the HTML element: Click here for More information.
The widget will appear within the section you added: - Format the widget to your liking (width, location etc).
- Add content to the left hand section.
- Preview then save your changes.
- Repeat these steps for all the tour/activity pages on your website where you want to embed the booking widget.
Customizing/Branding the Activity Widget
To customize the look of the booking widget, head to Zaui > Settings > Manage Online Bookings > Portals > [Selected Portal] and scroll down to Internet Booking Branding Management. Here you can select the font family, and match the primary colour, secondary colour, and font colours to those of your website.