Booking Tools

Booking Widget 3.0

Get the latest updates on the booking widget, how it can improve booking conversions on your website and how to set it up.

Here's an overview of what we cover in this article:

    ________________________________________________________________________

What's new with our Booking Widget?

  • Keep customers shopping - Website users can now add multiple tours and activities into the same basket, and pay for it all in one go. 
  • Floating cart - After selecting their tours, customers can click on 'Continue Shopping'. The checkout window will be minimized to a 'Floating Cart' that remains on your website until they checkout. You can also define the position of the floating cart (bottom right/ left, top right/left). 

    Floating cart example-1
  • Design improvements - The new widget has a fresh look. Overall it has easier and faster navigation, which will positively impact booking conversion rates on your website. Its simple design also means that it will fit in nicely with any website.
    • Image size - The image displayed for your activity in the widget is taken from the teaser image you upload for your activity in the TrekkSoft back office. You can check recommended image sizes in this article. If you are not using the Trekksoft website builder we recommend using the sizes indicated for the Armonia theme . 
  • Discounts are clearly displayed when customers buy more than one tour. 
  • Add-ons are more popular in the booking flow, making it easier for you to upsell customers.
  • Improved integration - The new widget integrates more seamlessly with your company's website, improving your customers' booking experience. 
  • Accept more payment methods with an updated hosted payment page from TrekkPay.
  • Third-party payment gateways coming soon - The 3.0 Widget currently supports our excellent TrekkPay solution. Other payment solutions such as Stripe are planned to be supported in the future. If you are currently using a PSP such as a stripe you can still use the 3.0 widget and you will see payments through the widget come into your TrekkSoft account.
    ________________________________________________________________________

Booking Widget Integration types

  • Activity booking: This integration is perfect for your booking pages. Select the relevant activity and let users view your activity calendar and start the booking process the moment they click on the booking button.
  • Inquiry: You can add an "Inquiry" button to allow customers to ask for a specific date for a tour or activity.
  • Shop Item: Add an integration for your shop items, such as vouchers, t-shirts, or any other merchandise. 
  • Package booking: Create packages from your activities and add a booking button for these packages to your website.
  • Activity details: If you would like to show descriptions, routes, and images before kickstarting the booking process, you should use this integration.
  • Package details: If you would like to show full package info and a book now button, you can select this button type.
  • Activity collection: Curate a collection of activities and use this integration to display your curated list. 
  • Activity finder:  This integration is useful if you would like to list out all the tours available and allow users to use date and departure city filters to find the perfect tour. 
  • Floating cart: The floating cart is automatically added to pages that have the booking button in place. For the floating cart to work on other pages without booking buttons, a special line of code needs to be added to the header or footer of the page. Pages like "About Us" or "Contact Us" should have the Floating Cart's code added.
  • Function integration: This type is for the advanced user who would like to use a function to open the booking widget on the page. 
    ________________________________________________________________________

How to integrate the Booking Widget to your website

    The new booking widget can be found inside your Admin Desk. On the left-hand side menu, click on Settings > Product & Booking  Settings > Booking widget.

    Here you can generate the widget code to insert into your website. Check out this video for steps to add the widget code to your website. 

     

    Integrate Booking Widget Into Website

     

      ________________________________________________________________________

    Activity Booking Integration type

    This integration is perfect for your booking pages.

    Select the activity you want to make bookable on the this page and let users view your activity calendar the moment they click on the booking button and proceed to booking an experience with you. 

    How to set up

    1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Activity booking".

    2. Now, from the Select activity section, select the desired activity.

      ________________________________________________________________________

    Inquiry Integration type

    Besides the "Book Now" button, you can also integrate an Inquiry button on your website.

    You can add an Inquiry button to specific activity pages for customers to ask about dates when you don't have availabilities (perhaps you've sold out or don't run a tour on those days), or you run a private tour and you don't have a fixed schedule for it. 

    Your customers will be able o send an inquiry for a certain activity by entering their email address and selecting a date. 

    How to set up

          1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Inquiry".

          2. Now, from the Select inquirable activity section, select the desired activity.


    What happens with inquiries? 

    After the inquiry is sent, your customer will get an automated email in the inbox confirming the sending of the inquiry. Additionally, you as the supplier will receive a notification via email and the inquiry will appear in your Backoffice under Bookings > Inquiries.

    ________________________________________________________________________

      Shop Items Integration type

      This is useful when you would like to integrate the Shop Items booking widget on your website to sell the shop items available on your account.

      How to set up

                    1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Shop Items".

                    2. Now, from the Select shop items category section, select the desired category.


      Note: Please be noted that you can't generate a widget for the single shop items. You can only generate a widget for the Shop Items category. Please refer to our Help Center article below to get more details on how to create a shop items category.

      How to create Shop Items Categories

        ________________________________________________________________________

        Package booking Integration type

        If you already have a description of the package added to your page then you can display a booking calendar directly to proceed with the booking further.

        How to set up

                        1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Package booking".

                        2. Now, from the Select package section, select the desired package.


        ________________________________________________________________________

        Activity details Integration type

        If you have any activity-related content added to your Activities in your TrekkSoft accounts, such as descriptions, highlights, or images you can display them before taking the customers to the booking calendar with this button type. 

        How to set up

        1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Activity details".

        2. Now, from the Select activity section, select the desired activity.


          ______________________________________________________________________

        Package details Integration type

        You can combine multiple activities (or just use one) into a package, so your customers can book a predefined combination of activities for a different price.

        How to set up

        1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Package details".

        2. Now, from the Select package section, select the desired package.


        You can read more about Packages here.

          ______________________________________________________________________

        Activity Collection Integration type

        You can create a customized grouping for your activities based on categories such as departure location, seasonality, or activity type. There is also a default group where all your activities are added automatically. You can also set your custom collection as the default collection.

        You can then place a booking button on your website which will bring up all the activities in that collection.

        Create Activity Collections under Settings > Product & Booking Settings >Activity Categories.

        How to set up

        1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Activity collection".

        2. Now, from the Select collection section, select the desired collection.


        You can learn more about Activity Collection here.

          ______________________________________________________________________

        Activity finder Integration type

        This integration is useful if you would like to list out all the tours available and allow users to use date and departure city filters to find the perfect tour. 

        How to set up

            1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Activity finder".



              This is what the Activity finder Integration will look like on your website.



          ________________________________________________________________________

        Floating cart Integration type

        This integration is useful if you would like to see the cart with added activities on a page on your website where there is no booking widget integrated like the Home page, Contact us page.

        How to set up

            1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Floating cart".

            2. Now, from the Position section, select the desired position of the cart on your website.

         

        Note: Please make sure to add a Booking widget to a page on your website before integrating the floating cart widget type. 

            TIP 1: Floating cart widget works in the combination with a book now button. So make sure to add a book now button on a page on your website before integrating this widget type.

            TIP 2: Add the floating cart widget script on all the pages of your website where there is no Book Now button to keep track of the pending booking in the widget.

            TIP 3: We recommend adding the floating cart widget script in the footer or header section of the website to reflect it throughout the website.

             

            How to Integrate the Floating cart Integration type?

            See the GIF below showing how to integrate it and how it works.

            Floating cart integration

             

            ________________________________________________________________________

            Function Integration type (For Advanced user)

            This integration is for Advanced users who have a good knowledge of coding (HTML/CSS/JS). This integration type is used for adding a function to open the booking widget on your website.

            How to set up

            1. To start, go to your Backoffice and then navigate to Settings > Product & Booking Settings > Booking widget. From the Integration type section, select the "Function integration".
            2. Copy the function Integration script generated in point#1 above and paste it into the header or footer section of your website or the page where you would like to integrate the function type widget on your website.
            3. Go to the Integration type section, select the desired type like Activity booking, Inquiry, Shop Items, Package booking,  Activity details, Package details, Activity collection, activity finder.
            4. Select the desirecd activity/package/shop items/collection based on the selection in point#3 above.
            5. Go to the Additional option, under Integrate widget as, select Function.
            6. Now go downwards and you will see a Function call that you can use with a button code on your website.

              Sample code that can be used on your website for the Function call to work properly!

              <button onclick="OpenTrekksoftBookingWidget('activity', '61809', 'ru', 'agent-111779', '#f44336')">Show</button>

                 

                Note: Please make sure to add the Function Integration script to the header or footer section of your website to work the Function call properly.

                How to Integrate Function Integration type?

                Please see the GIF file below showing how to integrate this type and how it works.

                Function Integration

                  ________________________________________________________________________

                Additional option

                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.
                • 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 it's 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.

                Language

                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

                Floating cart

                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.

                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.

                Colors

                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:

                 

                  ________________________________________________________________________


                Embed View

                The embed view comes as an easy alternative to iFrame users, offering a more secure and easier implement solution for embedding the TrekkSoft widget into your site.
                When creating the widget according to the steps above, open the "Additional Options" menu as seen in the screenshot below, to choose the "Embed" option. 
                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. 

                there is a minimum height of 450 pixels to avoid display issues. This can be overridden but is only recommended for expert web designers.
                After you copy the code insert it into the web page body where you would like the widget to appear.

                embedHelp

                Follow the steps in the GIF below to access the Embed option for the widget.

                embedView

                 

                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: 

                Disadvantages of using an iframe integration on your website

                 

                 

                Last updated 05/05/2021