Using the search widget, the visitor can choose the route he/she needs on your website and then go directly to the booking page. Partners usually place widgets in the sidebar of the site or directly in the text of the article, after pre-configuring it for a particular route or country. Widgets work great together with affiliate links: links are placed in the text and widgets are placed between paragraphs.

Let's learn how to customize this tool using the example of a standard widget.
For that, log into your personal account, select the widget you need on the

"Widgets and banners (RUB profile)" tab and click on "Get banner code":
"Widgets and banners (EUR profile)" tab and click on "Get banner code":

A window with the code opens below:

Copy this code.
Note: in the Wordpress content management system, you should insert the code in one line (without hyphenation) if the paragraphs of the text are automatically enclosed in paired tags. You can use this service: http://www.willpeavy.com/minifier/. With it, the code will look like this:

In your personal account, all widgets have standard settings. When clicking on "Search", the user goes to the Kiwitaxi website, where he/she must fill in the search form fields.

But the standard widget can be customized for various purposes. This will allow you to:

• change the widget design;
  
• set the language of the widget phrases;
  
• preset the country of search points, the start and/or end points of the transfer;
  
• set the currency in which prices will be displayed, etc.

Let's take a closer look at how these parameters are configured.

You can configure one or more parameters from the list below. The configuration format is JSON.

language — the language in which the widget phrases are displayed: English (en), German (de), French (fr), Spanish (es), Portuguese (pt), Polish (pl), Italian (it), Dutch (nl), Hungarian (hu), Russian (ru), Ukranian (ua).
"language": "en"

country — by default, the widget will offer locations in this country. Write the name of the country in English in the "name": [""] parameter, or specify the two-letter IATA code in the "code": "" parameter, by removing the other two parameters "ids": [""], and "name": [""] as follows (example for Greece):
"country": { "code": "gr" },

Note: even if you select a specific country, it will not limit the visitor's search. When he/she begins to enter the name of a point in another country, for example, "Paris", the widget will find the desired location and allow the visitor to book a transfer. If the country is not specified, the most popular routes in the world will be offered.

Attention! This option will not work if several parameters are specified (code, name, id). Only one parameter must be specified.

place_from — departure point: the name of the city (airport, railway station, bus station, port) in English or IATA code. If only this point is specified, the frame will automatically load the page with all the routes from this point. This is useful when the widget is placed in an article or on a website about a specific location. For example, you can offer your reader ways to get from Antalya Airport to many popular resorts:
"place_from": "Antalya"

place_to — destination point: the name of the city (airport, railway station, bus station, port) in English or IATA code. For example, your blog is about Paris. There are several airports in Paris. By setting up place_to in your widget for Paris, you will show your visitor the options for getting to Paris from any transport hub.

Note: the country, place_from and place_to parameters do not depend on each other. You can configure either all of these parameters together or selectively: one or two.
"place_to": "Paris"

transfers_limit — the number of results on the list of transfers. If only one point is selected: From or To, the search results will be routes from/to this point. The number of such results on the page will be equal to the value set for this parameter. The default is 10.
For example, for transfers_limit equal to 2, the result will be as follows:
"transfers_limit": "2"

transfer_options — transfer classes. You can limit the results to certain classes from the list:

• MCR - Micro
  
• ECN - Economy
  
• CMT - Comfort
  
• BSN - Business
  
• PRM - Premium
  
• MV4 - Minivan 4pax
  
• MB7 - Minibus 7pax
  
• PM6 - Premium Minibus 6pax
  
• MB10 - Minibus 10pax
  
• MB13 - Minibus 13pax
  
• MB16 - Minibus 16pax
  
• MB19 - Minibus 19pax
  

By default, all car classes are displayed. For example,
"transfer_options": "ECN,MCR",
"transfer_options": "BSN"

transfer_options_limit — sets the number of car classes (see the previous paragraph), which will be shown in the search results, starting with the "smallest" - Micro. By default, it is unlimited. For example,
"transfer_options_limit": "4"

display_currency — The currency in which the transfer price is displayed. Specify one of three options here: USD, EUR, RUB. Write the currency in uppercase! By default, the currency is determined by the language parameter value (USD for en, RUB for ru). For example,
"display_currency": "USD"

height — maximum height of the widget in pixels. A vertical scroll bar will appear if the widget content is larger. The default height of the widget is 400 pixels. If there is no such a parameter in the code, the height will vary depending on the content.
For example, "height": "600"

ref_params — insert here your partner ID, a list in key-value format.

type — widget type. If empty, the search widget is used. If you want to place a widget with classes on your page, specify the following in the parameters: "type": "transfers". For example,
"type": "transfers",
"type": ""

deep_link — lets you create deep links with a pre-set route. You can add to an URL departure and/or destination points, and country to search a transfer when this parameter is enabled. The points should be added in this order:
#/country/name/from/departure_point/to/destination_point

where: country - is a country name in English;
departure and destination points - the names of the points in English or IATA code.
The parts /country/name, /from/departure_point, /to/destination_point are not necessarily, i.e. just one of them can be specified. Example:
https://sitename.com/transfer/#/from/CDG/to/Paris/country/France

A widget will be opened for the specified point/points/country.
Also, this parameter will help to create a deep link: you need to specify the departure and/or destination points in the widget's fields and you get the deep link URL in the address line.

Note:
1. You need to renew the link after adding the point/points/country;
2. the link will be prioritized over the other widget settings.

This feature is enabled by default: "deep_link": true. If you need to disable it just change the value to false.


You can also customize the widget design for your site - change the color of the buttons, background, font, etc.

For example, it may become like this:

*the default color is given in brackets.

root_background — form background color (#f5f5f5);

button_font_color — font color of the word "Search" on the same-name button (#ffffff);

button_background — "Search" button color (#239a54);

button_background_hover — "Search" button color on hover (#0274da);

widget_background — search box color (#f9ac1a);

placeinput_font_color — font color of the "From" and "To" fields (#c8ced4);

placeinput_background — background of "From" and "To" fields (#ffffff);

placeinput_background_label — color of hint for "From" and "To" fields (#c8ced4);

icon-center_background — background of icon (#ffffff);

icon-center_color — color of arrows in the input field (#6c7c8c);

icon-center_background_mobile — background color of the icon with arrows in the mobile version (#f9ac1a);

icon-center_color_mobile — arrows color in mobile version (#ffffff);

autocomplete_font_color — font color in the drop-down list of points (#373f47);

autocomplete_background — background color of the drop-down list (#ffffff);

autocomplete_select_font_color — font color of the drop-down list on hover (#ffffff);

autocomplete_select_background — background color of the drop-down list on hover (#239a54);

loader_color — preloader color (#f9ac1a);

empty_color — failed search message color (#373f47).

info_caption_color — color of caption under icon (#4a4a4a);

info_icon_color — icon color (#4a4a4a);

info_icon_background_color — background color of this block (#fff0cc);

info_icon_border_color — color of icon frame (white).

class_header_color — color of car class list header (#6c7c8c);

class_button_font_color — font color of the word "Book" on the same-name button (#ffffff);

class_button_background — "Book" button color (#26a65b);

class_button_background_hover — "Book" button color on hover (#0274da);

class_font_color — font on car class page (#373f47);

class_background — car class list background color (#ffffff);

class_comment_font — font of class comments line (#000000);

class_comment_background — background color of class comments line (#bfc0c4);

more_font_color — font color of "All transfers" button (#0267c1);

more_background — background color of "All transfers" button (transparent);

more_background_hover — background color of "All transfers" button on hover (transparent).

Informational message for routes with special conditions, for example:

notification_border_color — warning box color (#e37f17);

notification_background — background color (#f6f1ec);

notification_color — warning text font (#373f47).

transfer_font_color - color of capture (#373f47);

transfer_background - background color (#f6f7f8);

transfer_background_hover - background color on hover (#f6f7f8).

If you want to place two search widgets on the same page you need to remove the last line of the code <script src="https://new-widget.kiwitaxi.com/static/js/kiwitaxi-search.js"></script> in the first widget and keep it only in the code of the last widget.

This simple setup will help you customize the widgets for your website. We hope that the article was useful, and if you have any questions, write to us at cpa@kiwitaxi.com