Tools for the Trade

                                               Embedding Dohop in your Website

                                                                                                                   Deeplinking to Dohop

                       Build your own Flight Search Engine

The Fully Embedded Version 

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:

  1. Choose a language
  2. Select a layout
  3. Configure the look and feel of the flight planner to match your site
  4. 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.en - 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
  • lt.dohop.com - 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.

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> 

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

     

Select a layout - 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.

 

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:

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 names
c1 and c2 = Country names