Integrate with your website

Integrate with your website

If you are not subscribed to the Vacation Labs Website builder because you already have your own website, then you can use our integration widgets to connect your website with the booking engine. There are 5 types of widgets available under integration:
  1. Book Now button
  2. Availability Calendar
  3. Floating book button
  4. Schedule and rates for a trip
  5. Schedule and rates for multiple trips
The Integration section is available under WEBSITE:


Book Now Button

To generate a Book Now button take the following steps:

  1. Click on GET THIS



  2. You will arrive on a page that would allow you to configure and customise the widget:



  3. Under Button for?  Always choose Booking Form
  4. Under Which trip? Click on the dropdown and choose the trip for which you wish to generate the Book Bow button
  5. You can change the background colour of the button to match the theme of your website
  6. You can also rename the text on the button to anything you like for example: "Buy Now" or "Reserve Now"

Availability Calendar

Show all upcoming departures in a calendar with “sold out” also highlighted. Customers can pick a date and begin the booking process. Use this when you have a lot of open dates. To generate a Book Now button take the following steps:
  1. Click on Get This:

  2. Choose the trip you want



  3. You can change the background colour of the Calendar to match the theme of your website
  4. If you want the booking form to open in a new page, choose the visible option.
  5. If you want the form too open in the same page on a lightbox/pop-up, then choose the option Open the booking form in a modal
Open the booking form in a modal
Requires Javascript code on your website
Paste the following javascript code before the closing   </body>  tag on   every page  of your website. There is usually a common footer that is used throughout a website – you can put this Javascript code in the common footer file. 
<!-- BEGIN: VACATION LABS INTEGRATION CODE -->
<script type="text/javascript" id="vl-5b70b7461493c8056ad5d93f61e7b69d">
  window.VL = window.VL || {};
  VL.client_key = "5b70b7461493c8056ad5d93f61e7b69d";
  VL.domain = "app.vacationlabs.com";

  (function(window, document) {
    var sc = document.createElement('script'); 
    sc.type = 'text/javascript'; 
    sc.async = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + VL.domain + '/trips/integration-'+VL.client_key+'.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(sc, s);
  })(window, document);
</script>
<!-- END: VACATION LABS INTEGRATION CODE -->
Check if the code is properly installed on your website.
Follow the steps shown on the page to verify the placement of the javascript.

Floating Book Now button

Requires Javascript code on your website
Get an awesome “Book now” button on every page of your website by adding just one line of code. The floating button links to your storefront.
  1. Click on Get This:


  2. In order for the Floating button to work you will have to add the paste the following javascript code before the closing </body> tag on every page of your website. There is usually a common footer that is used throughout a website – you can put this Javascript code in the common footer file.
    <!-- BEGIN: VACATION LABS INTEGRATION CODE -->
<script type="text/javascript" id="vl-5b70b7461493c8056ad5d93f61e7b69d">
  window.VL = window.VL || {};
  VL.client_key = "5b70b7461493c8056ad5d93f61e7b69d";
  VL.domain = "app.vacationlabs.com";

  (function(window, document) {
    var sc = document.createElement('script'); 
    sc.type = 'text/javascript'; 
    sc.async = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + VL.domain + '/trips/integration-'+VL.client_key+'.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(sc, s);
  })(window, document);
</script>
<!-- END: VACATION LABS INTEGRATION CODE -->
    Check if the code is properly installed on your website.
    Follow the steps shown on the page to verify the placement of the javascript.
  3. Choose the Button colour, Text colour, the title on the button and its position on your website



  4. Once done click on Save
  5. Check your website to verify that the button is visible as configured

Schedule and rates for a trip

Requires Javascript code on your website

Show all upcoming departures for a single trip in a list format with “available seats”, “booked seats” and more highlighted stuff. Customers can filter dates and begin the booking process. Use this if you don't have a lot of open dates.

  1. Click on Get This:



  2. Choose the trip you wish to generate the widget for and configure its dimensions. You can also decide what information you want to be displayed on the widget and upto how many departures should be displayed:



  3. Optional Message appears on the top of the widget
  4. You can also choose to have the booking flow in a modal. Make sure that you have installed the Javacript as mentioned in the previous steps.

Schedule and rates for multiple trips

Requires Javascript code on your website
Show all upcoming departures for a collection of trips with “available seats”, “booked seats” and more highlighted stuff, all in one place. Customers can filter dates and trips and begin the booking process. Useful if you would like to display availability for trips on a special landing page
  1. Click on Get This:



  2. Choose the trips you wish to generate the widget for and configure its dimensions. You can also decide what information you want to be displayed on the widget and upto how many departures should be displayed:



  3. Optional Message appears on the top of the widget
  4. You can also choose to have the booking flow in a modal. Make sure that you have installed the Javacript as mentioned in the previous steps.

    • Related Articles

    • Integrate your Payment Processor (Detailed)

      Payment Processors allow you to collect online payments from your customers and Vacation Labs has integrated itself with many such payment processors( https://www.vacationlabs.com/integrations/) which are ready to be used with just a few clicks. If ...

    • What is a storefront

      Apart from a booking engine, Vacation Labs gives you a fully optimized pages to beautifully showcase your tours and other landing pages.  Your storefront is where customers can view your trips, rates, & availability. They can inquire for more details ...

    • Setting up a Post confirmation redirect URL

      Once a customer completes a purchase, the booking process is over and most likely the user will now leave your website. By using the option to setup a Post confirmation redirect URL you can redirect your customers to visit your Facebook or Instagram ...

    • Adding booking form message

      Vacation Labs system allows you to display a message on the booking form, either for all trips, or specific trips. You can, for example, use this to communicate specific instructions related to the booking process, or promote a special ...

    • How to make Title/salutation optional in booking form?

      Title/salutation field (i.e. Mr/Mrs/Miss)  of the primary contact details on the booking form is by-default set to mandatory, but you can choose completely disable the field or keep it optional. Please follow the below steps to see how to disable the ...