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

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.

<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>

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

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 onevery pageof 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.

   <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>

   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

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

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.