In this article, we will cover the Additional options we have available for the widget integration like different views of the widget, button colors, etc.
Here's an overview of what we cover in this article:
- Integrate widget as
- Open widget in
- Customize widget for Agent
- Customize Book Now text
- Floating cart
- Embed View
Integrate widget as:
You can choose the integration type you would like to use as per your requirement from here.
- Button: This is useful when you would like to display a button on your website.
- Link: This is useful if you would like to generate a link to the widget for your website. The generated link can be used with an existing button on your website.
- Function: This is for the advanced user. This is useful if you would like to add a function to open a booking widget on your website. Get more details on how to integrate this type here.
- Embed: This is useful if you would like to embed a widget on your website like an iFrame. It replaces the need to use iFrames and is more secure. You can adjust the size of the embedded widget by setting pixel width and height. For example 600px by 500px. You can also make the embedded widget adapt its size automatically to the page by setting a percentage instead of pixels. For example 30% by 50%. This will also work for mobile versions.
Open widget in:
You can choose the open widget type you would like to use as per your requirement from here.
- Modal: This is useful when you would like to open a widget as a Modal/Pop Up on your website.
- New tab: This is useful if you would like to open the widget in the New tab of the browser.
- New window: This is useful if you would like to open the widget in the New window of the browser.
You can choose which language should be used first when someone opens the booking widget, so it matches the language of the page where you place it on your website
Selected optional agent
You can allocate an Agent to your `Book Now` button, so you can track how many bookings are coming from an agent's website and track the Agent Commissions as well.
Book Now button text
If you would like to change what text appears on the button instead of Book Now
This is useful when you would like to keep track of the pending booking in the booking widget. You can hide or display the cart on your website from here. Get more details on how to integrate this type here.
Note: If you disable the floating cart, please ensure that all activity codes on your website have the floating cart disabled. When you disable the floating cart, customers will need to restart the booking process to reach their cart.
You can choose what color the text and background color of your `Book now` button should be by default and when someone is hovering over it. Please see the example below.
We have selected these colors:
This is how the button looks by default:
This is how it looks when I hover over it:
The embed view comes as an easy alternative to iFrame users, offering a more secure and easier implementation solution for embedding the TrekkSoft widget into your site. See the preview of the embed widget on the website.
Tip 1. Note that you have to set the size the embedded widget will have on your site. It can be set by pixels or percentage by typing in "50%" for example. This will set it to 50% of your page width.
Tip 2. There is a minimum height of 450 pixels to avoid display issues. This can be overridden but is only recommended for expert web designers.
Follow the steps in the GIF below to access the Embed option for the widget.
Note: Please keep in mind that the new booking widget won't support iframe integration. We've compiled a couple of reasons why iframe integration is less favorable on your website here.
Last updated 15/10/2021