Embedded Flight Planner

Dohop enables web developers to build their own white label flight planner using the Dohop platform. The Dohop Flight Planner can be embedded into any Internet site in a matter of hours using HTML frames or HTML iFrames.

Just follow the 4 simple steps:

  • Choose a language
  • Select a layout
  • Configure the look and feel of the flight planner to match your site
  • Configure optional parameters like destination or origin of flights

Choosing a language 

The simplest method of creating a dohop whitelabel is to link to the generic whitelabel provided here: www.dohop.com/g/.

Select one of the supported languages by changing the url. For example spanish: www.dohop.es/g/.

You can choose from the following languages:

www.dohop.de - German

www.dohop.com - English

www.dohop.fr - French

www.dohop.cz - Czech

www.dohop.is - Icelandic

www.dohop.dk - Danish

www.dohop.no - Norwegian

www.dohop.se - Swedish

www.dohop.es - Spanish

www.dohop.it - Italian

www.dohop.pl - Polish

ca.dohop.com - Catalan

pt.dohop.com - Portugese

th.dohop.com - Thai

www.dohop.lt - Lithuanian

www.dohop.jp - Japanese

www.dohop.cn - Chinese

www.dohop.ru - Russian

Wherever possible we provide a fully localized experience for the user, the German version directs users to the German versions of the airline or booking sites, if they exist.

Dohop users can change language in use with site's language selector. User's language selection is stored in browser's cookie. Whitelabel can still force their embedded flight search to specific language by adding query parameter to the url named flang and two letter language code, like used in the domain list above. For example forceing language to German you use www.dohop.com/g/?flang=de.

You can also force the currency by adding query parameter named fc and three letter currency code (iso codes). For example forceing German language and USD dollars www.dohop.es/g/?flang=de&fc=USD

Select a layout

Embedding in an iframe

There are two embedded layout formats that you can choose from. Most sites choose to embed the dohop flight planner in an iframe. To assist in making this as easy as possible dohop has created a simple script tag that you can paste into any html page. An example can be found here. Using this method also enables you to accept searches from our search forms if you have set one up elsewhere on your site like this.

Here is a list of parameters that affect how the iframe is displayed:

Width & Height: Set the width and height of the iframe.

Example:

<script src="http://www.dohop.com/g.js?width=600px&height=600px"></script> Powered by <a href='http://www.dohop.com/'>Dohop</a>. 

Resizing: rs=URL. Enable the resizing feature. If you do not enable the resizing feature you will inevitably end up with scrollbars on your embedded flight planner once users start searching for flights. Enabling this feature requires you to add a small html file to your own website.

Example: To enable resizing on http://mydohop.googlepages.com/search we first upload this file: http://www.dohop.com/html/resize.html to this location: http://mydohop.googlepages.com/resize.html. We then add the rs parameter to the script url like this:

<script src="http://www.dohop.com/g.js?width=657px&height=600px&rs=http://mydohop.googlepages.com/resize.html"></script>

Note: It is imperative that your resize.html file is located on the same domain as the page that contains your embedded dohop flight planner, othewise the resizing feature will not work.

Style: c=URL. Change the look and feel of the embedded flight planner by pointing to your own css file.

Example: To change the look and feel on http://mydohop.googlepages.com/search we upload a css file to: http://mydohop.googlepages.com/mydohop.css. We then add the c parameter to the script url like this:

<script src="http://www.dohop.com/g.js?width=657px&height=600px&rs=http://mydohop.googlepages.com/resize.html&c=http://mydohop.googlepages.com/mydohop.css"></script>

Note: This css file can be located anywhere on the internet.

Embedding in a frame

You can also embed the dohop flight planner in a frameset like this. Just make sure the frame containing the flight planner is not height constrained or you might end up with a scrollbar once the user starts searching for flights.

Example:

<HTML>
<HEAD>
<TITLE>dohop framed</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="frame1.html">
<FRAME src="http://www.dohop.com/g/">
</FRAMESET>
</HTML>

There are also parameters you can add to the src url for the frame to influence the look and feel of the flight planner.

Header: h=URL. Creates an iframe on top of the flight planner containing the provided web page.

Example: 

http://www.dohop.com/g/?h=http://mydohop.googlepages.com/header.html

Footer: f=URL. Creates an iframe underneath the flight planner containing the provided web page

Example: 

http://www.dohop.com/g/?f=http://mydohop.googlepages.com/footer.html

Styles: c=URL. Allows you to override the default style of the dohop flight planner by providing your own css file

Example: 

?c=http://mydohop.googlepages.com/mydohop.css">http://www.dohop.com/g/?c=http://mydohop.googlepages.com/mydohop.css

Base domain: b=URL. Allows you to use shorter URLs for other parameters. The provided Base URL will be used as a prefix for all other URL parameters.

Example: 

http://www.dohop.com/g/?b=http://mydohop.googlepages.com/&h=header.html&f=footer.html

Select a layout - No frames

If for some reason you don't want to host the dohop flight planner under your own domain but still want to be able to direct users to a dohop flight planner that looks like it's your own you can use any of the options already listed as well as the following:

t: Title, choose your own title for the page

Example: 

http://www.dohop.com/g/?t=My wonderful travel website

Configure the look and feel

You can modify the look and feel of the flight planner by adding an url to your css stylesheet as a parameter as described above. This stylesheet is loaded after the dohop stylesheet, which means it overrides the basic dohop styles.

We do not recommend changing the basic styles such as font sizes and other width and height settings as that may have undesirable results, but modifying the color scheme, turning the sidebars off and other layout elements can be modified at will.

Example:

To change the background colors of the flight planner (and make it terribly ugly) create a css file containing the following style blocks.

#content #contentForms {background-color:#0FE;}body{background-color:#0FE;}

Configuring optional parameters

Search parameters can be added to the iframe url after the # symbol.

Use these parameters to preset origin and destination airports or departure and return dates on the search page, making it even easier for the end user to search.

Example:

http://www.dohop.com/g/?h=http://mydohop.googlepages.com/header.html#a1=SXF,TXL,THF&a2=AGP

Where the parameters are:

a1 = 3 letter IATA airport code(s) for origin

a2 = 3 letter IATA airport code(s) for destination

d1 = Departure date in ddmmyy format

d2 = Return date in ddmmyy format

Optional parameters:

y1 and y2 = City namesc1 and c2 = Country names