Opening an Embedded Travel Planning Widget via Custom URL Link

vickeryhillWeb Development

Trip planning widgets are great tools for getting the destination visitor to engage beyond basic site navigation. The planning widget we originaly created for TourismFernie.com can be launched via navigation from any page.

Screen Shot 2016-04-29 at 10.53.56 AM

After 18 months of use, management at Tourism Fernie wanted to the ability to create a custom URL to any page on there site with the trip planning modal already open.  They could then send individual users or groups this custom link to guide them down into the booking path without having to click or know that the planning widget exists. The answer came in the form of jQuery mixed with JavaScript.

The first part lay in firing a function based on matching an element in the url. The URL query string variable value pair we used was “?inspire-me=now“.

The JavaScript command for matching the current pages’ URL is “window.location.href.index”. To match our custom URL it would look something like:

(window.location.href.indexOf(“?inspire-me=now”) > -1) {“run my function”} .

To open the planning widget we needed to simulate a click on the menu link (or on a button). For this we used jQuery to trigger a ‘click’ event. This looks like:

 $(‘a.planner-widget’).trigger(‘click’);

Put it all together and wrap it in a document ready function and you get:

<script type=”text/javascript” >
$(document).ready(function () {
if (window.location.href.indexOf(“?inspire-me=now”) > -1) {
$(‘a.planner-widget’).trigger(‘click’);
}
});

</script>

Now if Tourism Fernie wants to send a link to a customer interested in mountain biking events, just add /?inspire-me=now.  They will get the page with the planning widget open.

TourismFernie.com with planning widget open

This feature can be used when working one-0n-one with a future visitor, when directing a travel group organizer (who will share the link with the group) to pertinent content on the site, or even to the masses via a broadcast email campaign.