home > support > solution library > booking engine > booking engine switch

Building a booking engine switch

One of the core concepts in TourCMS is the Channel. Whenever a Tour/Hotel is booked it is being booked via a Channel, similarly whenever a Tour/Hotel is displayed on a website or distributed to a Marketplace Partner some settings / tweaks are being applied by a Channel; think of Channels as different ways of looking at the same core product. Channels allow you to apply things like markups, translations or currency conversions to the base products you have loaded in TourCMS - or even to power multiple different brands.

When a Tour/Hotel is bookable on multiple Channels it will have a separate Booking Engine link for each. This article covers ways of presenting the choice of booking engines at the time of booking to provide for example:

Choice of currency at the time of booking
Separate Agent and Customer booking engine links

Style 1: Standard links

This style might be good if you only have two separate links with one being the primary link and the other more secondary. Here we have used two currencies however this style might be good for a primary Customer booking engine link and a secondary Agent link. (NB: Demo links point to BBC and NPR websites as a proof of concept)

Demo

Book online (GBP)
or
Book in US Dollars

For demonstration purposes we have used two news website links, you should replace these with the two Booking Engine links for your product (found in Setup for that product).

<p style="text-align: center;">
    <a class="bt" href="http://bbc.co.uk">Book online (GBP)</a><br />
        or<br />
    <a class="sublink" href="http://www.npr.org/">Book in US Dollars</a>
</p>

The CSS used in the demo can be found at the end of this article

When using TourCMS templates to manage a website there are Element tags we can add to our template to display booking links, combining that with the website_id attribute we can get the links from any of the channels in our account.

In the example below we have not added a website_id attribute to our first link, what that will do is generate the booking link for the website that our template is sitting in. For the second link we have used an id of 12345 - just replace that with the id for your Website channel (found in Website Manager).

<p style="text-align: center;"> 
  <a class="bt" href="<$TourCMStour output="t_book_url"$>">Book online (GBP)</a><br />
    or<br /> 
  <a class="sublink" href="<$TourCMStour output="t_book_url" website_id="12345"$>">Book in US Dollars</a> 
</p>

The CSS used in the demo can be found at the bottom of this article

Style 2: Select box "dropdown"

This style works well when there are more than two links, or when there is no obvious primary link. (NB: Demo links point to BBC and NPR websites as a proof of concept)

Demo

Code

HTML
TourCMS Templates

For demonstration purposes we have used two news website links, you should replace these with the two Booking Engine links for your product (found in Setup for that product).

We have added the first link twice (to the form action as well as the first option), this way if the user doesn't have JavaScript they still get redirected to a booking engine.

<form action="http://www.bbc.co.uk" onsubmit="window.location = this.channels.options[this.channels.options.selectedIndex].value; return false;" style="text-align: center;">
  <select name="channels">
    <option value="http://bbc.co.uk">£ GBP</option>
    <option value="http://npr.org">$ USD</option>
  </select>
  <input type="submit" class="bt" value="Book online" />
</form>

The CSS used in the demo can be found at the end of this article

We have added the first link twice (to the form action as well as the first option), this way if the user doesn't have JavaScript they still get redirected to a booking engine.

<form action="<$TourCMStour output="t_book_url"$>" onsubmit="window.location = this.channels.options[this.channels.options.selectedIndex].value; return false;" style="text-align: center;"> 
  <select name="channels"> 
    <option value="<$TourCMStour output="t_book_url"$>">£ GBP</option> 
    <option value="<$TourCMStour output="t_book_url" website_id="12345"$>">$ USD</option> 
  </select> 
  <input type="submit" class="bt" value="Book online" /> 
</form>

The CSS used in the demo can be found at the bottom of this article

CSS

/* Button */
a.bt, button.bt, input.bt {
    font-size: 1em;	 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
			 
	cursor: pointer;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px; 
	border-radius: 4px;
	padding: 4px 6px 4px;
	.padding-bottom: 4px; /* IE hack to fix spacing */
	display: inline-block;
		
	background: #147FCB url(btn_stretch.png) center left repeat-x;
	border: 1px solid #ccc;
	border-color: #1c71ae;
			    
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Button click */					
a.bt:active, button.bt:active, input.bt:active {
    background-image: url(btn_stretch2.png);			
}

/* Secondary link for Style 1 */
.sublink {
	font-size: 14px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #286bd6;
}

The CSS above references the following two images which are used to create the gradient effect

Contact Info

Learn More

Follow Us

Building a booking engine switch

Style 1: Standard links

Demo

Code

Style 2: Select box "dropdown"

Demo

Code

CSS