With the search widget, visitors can select their desired route on your website and go straight to the booking page. Partners typically place widgets in the sidebar or directly within article text, often pre-configured for a specific route or country. Widgets work particularly well alongside affiliate links: the links can be embedded in the text, while widgets are inserted between paragraphs.

Let’s see how to customize this tool using a standard widget as an example.
Log in to your account, go to the "Widgets and banners" tab, select the widget you want, and click "Get Banner Code":

A window with the code opens below:

Copy this code.

Note: In WordPress, if your text editor automatically wraps paragraphs in tags, you should insert the code on a single line (without line breaks). You can use this tool to minify it: http://www.willpeavy.com/minifier/. This ensures the code displays correctly and looks like this:

In your account, all widgets come with default settings. When a user clicks "Search", they are taken to the Kiwitaxi website to complete the search form.

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: selecting a specific country does not restrict the visitor’s search. If they start typing a location in another country, such as "Paris", the widget will find it and allow them to book a transfer. If no country is selected, the widget will suggest the most popular routes worldwide.

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