Поисковый виджет

Используя поисковый виджет, посетитель может выбрать нужный ему маршрут на вашем сайте, после чего перейти сразу на страницу бронирования. Партнеры размещают виджеты на боковой панели сайта или прямо в тексте статьи, предварительно настроив их для определенного маршрута или страны. Виджеты хорошо работают в связке с партнерскими ссылками: ссылки расставляются в тексте, а виджеты — между абзацами.

Давайте научимся настраивать этот инструмент на примере стандартного виджета.

Для этого войдите в свой личный кабинет, на вкладке «Виджеты и баннеры» выберите подходящий виджет и нажмите кнопку «Получить код баннера»:

Ниже откроется окно с кодом:

Скопируйте этот код.

Примечание. В системе управления контентом Wordpress следует вставлять код одной строкой (без переносов), в случае если абзацы текста автоматически заключаются в парные тэги. В этом вам поможет сервис http://www.willpeavy.com/minifier/. С его помощью код примет такой вид:

В вашем личном кабинете все виджеты имеют стандартные настройки, поэтому пользователь при нажатии на кнопку «Найти» переходит на сайт Кивитакси и должен заполнить поля формы поиска.

Но стандартный виджет можно настроить для различных целей. Это позволит:

• поменять дизайн виджета;
• задать язык фраз виджета;
• указать страну поиска точек, начальную и/или конечную точки трансфера;
• определить валюту, в которой будут отображаться цены, и т.д.

Давайте рассмотрим подробно, как настраиваются эти параметры.

Вы можете настроить один или несколько параметров из списка ниже. Формат конфига - JSON.

language — язык, на котором отображаются фразы виджета: русский (ru), английский (en), немецкий (de), французский (fr), испанский (es), португальский (pt), польский (pl), итальянский (it), нидерландский (nl), венгерский (hu), украинский (ua).
"language": "en"

country — по умолчанию виджет предложит направления в этой стране. Напишите название страны на русском или английском языке в "name": [""], удалив два других параметра "ids": [""], и "code": "",, или укажите двухсимвольный код IATA в "code": "",, удалив параметры "ids": [""], и "name": [""],. Пример для Греции:
"country": { "name": ["Greece"] }

Примечание: даже если вы выберете определенную страну, это не ограничит посетителя в поиске. Когда он начнет вводить название точки в другой стране, например «Париж», то виджет найдет нужный город и позволит заказать трансфер. Если страна не указана, то будут предложены самые популярные маршруты в мире.
Обратите внимание! Данная опция не будет работать, если указаны несколько параметров (code, name, id). Необходимо указывать только один параметр.

place_from — точка отправления: название города (аэропорта, ж/д вокзала, автовокзала, порта) на русском или английском, либо код IATA. Если будет задана только данная точка, то фрейм будет сразу загружать страницу со всеми маршрутами из данной точки. Это удобно, когда виджет размещен в статье или на сайте по конкретному направлению. Например, предложите своему читателю способы добраться из аэропорта Анталии до многих популярных курортов:
"place_from": "Анталья",
"place_from": "Antalya"

place_to — точка назначения: название города (аэропорта, ж/д вокзала, автовокзала, порта) на русском или английском, либо код IATA. Например, вы ведете блог о Париже. В Париже несколько аэропортов. Настроив place_to в своем виджете на Париж, вы покажете своему пользователю варианты, как можно добраться до Парижа из любого транспортного узла.

Примечание: параметры country, place_from и place_to не зависят друг от друга. Вы можете настроить как все эти параметры, так и выборочно: один или два.

transfers_limit — количество результатов в списке трансферов. Если выбрана только одна точка: Куда либо Откуда, то результатом поиска станут маршруты из этой точки или в эту точку, и количество таких результатов на странице будет равно указанному в данном параметре значению. По умолчанию равно 10.

Например, для transfers_limit, равному 2, результат будет таким:
"transfers_limit": "2"

transfer_options — классы трансфера. Можно ограничить выдачу только определенными классами из списка (в формате: "transfer_options": "ECN,MCR"):

• 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
  

По умолчанию отображаются все классы авто. Примеры:
"transfer_options": "ECN,MCR",
"transfer_options": "BSN"

transfer_options_limit — задает количество классов авто (см. предыдущий пункт), которые будут показаны в результатах поиска, начиная с "младшего", т.е. с Micro. По умолчанию не ограничено.
"transfer_options_limit": "4"

display_currency — валюта, в которой отображается стоимость трансфера. Укажите здесь один из трех вариантов: USD, EUR, RUB. Прописывайте валюту в верхнем регистре! По умолчанию валюта определяется по значению параметра language (RUB для ru, USD для en).
"display_currency": "USD"

height — максимальная высота виджета в пикселях. Вертикальная полоса прокрутки появится, если содержимое виджета будет больше. По умолчанию высота виджета - 400 пикселей.
"height": "600"

ref_params — контекстные параметры url на внешние сайты, список в формате ключ-значение.

type — тип виджета. При пустом значении используется поисковый виджет. Если вы хотите разместить у себя на странице виджет с классами, то укажите в параметрах: "type": "transfers". Примеры:
"type": "transfers",
"type": ""

deep_link — позволяет создавать глубокую ссылку с предустановленным маршрутом. При включенной настройке вы можете добавить в URL точки откуда, куда и/или страну для поиска трансфера. Точки добавляются в следующем формате:
#/country/страна/from/откуда/to/куда

где: страна - это наименование страны на английском языке;
откуда, куда - наименование точки на английском языке, либо код IATA.
Части /country/страна, /from/откуда, /to/куда - необязательные, т.е. может быть указан только один из этих параметров. Пример:
https://адресвашегосайта.com/transfer/#/from/CDG/to/Paris/country/France

Откроется виджет для заданной точки/точек/страны.
Эта же функция позволит вам получить глубокую ссылку: для этого в полях виджета введите одну или обе точки Откуда/Куда и в адресной строке вы получите URL глубокой ссылки.

Обратите внимание:
1. после добавления точки/страны ссылку необходимо обновить
2. ссылка будет приоритетнее прочих настроек виджета.

Для включения возможности формировать такую ссылку параметру deep_link присваивается значение true, иначе - false.


Вы также можете адаптировать дизайн виджета для своего сайта - изменить цвета кнопок, фона, шрифта и т.п.

Например, он может стать таким:

*В скобках указан цвет по умолчанию.

root_background — цвет фона (#f5f5f5);

button_font_color — цвет шрифта слова "Найти" на одноименной кнопке (#ffffff);

button_background — цвет кнопки "Найти" (#239a54);

button_background_hover — цвет кнопки "Найти" при наведении курсора (#0274da);

widget_background — цвет рамки полей поиска (#f9ac1a);

placeinput_font_color — шрифт в полях "Откуда" и "Куда" (#c8ced4);

placeinput_background — фон полей ввода точек Куда, Откуда (#ffffff);

placeinput_background_label — цвет подсказки в полях Куда, Откуда (#c8ced4);

icon-center_background — фон иконки (#ffffff);

icon-center_color — цвет стрелок в поле ввода (#6c7c8c);

icon-center_background_mobile — цвет фона иконки со стрелками в мобильной версии (#f9ac1a);

icon-center_color_mobile — цвет стрелок в мобильной версии (#ffffff);

autocomplete_font_color — цвет шрифта в выпадающем списке точек (#373f47);

autocomplete_background — цвет фона выпадающего списка (#ffffff);

autocomplete_select_font_color — цвет шрифта (#ffffff);

autocomplete_select_background — (#239a54);

loader_color — цвет прелоадера (#f9ac1a);

empty_color — цвет сообщения о неудачном поиске (#373f47).

info_caption_color — цвет подписи под картинкой (#4a4a4a);

info_icon_color — цвет иконки (#4a4a4a);

info_icon_background_color — цвет фона данного блока (#fff0cc);

info_icon_border_color — цвет рамки иконки (white).

class_header_color — цвет заголовка списка классов авто (#6c7c8c);

class_button_font_color — цвет надписи "Заказать" на одноименной кнопке (#fff);

class_button_background — цвет кнопки "Заказать" (#26a65b);

class_button_background_hover — кнопка "Заказать" при наведении курсора (#0274da);

class_font_color — шрифт на странице классов авто (#373f47);

class_background — фон списка классов авто (#fff);

class_comment_font — шрифт строки с комментариями к классу (#000000);

class_comment_background — фон строки с комментариями к классу (#bfc0c4);

more_font_color — цвет шрифта кнопки "Все трансферы" (#0267c1);

more_background — фон кнопки "Все трансферы" (прозрачный);

more_background_hover — фон кнопки "Все трансферы" при наведении курсора (прозрачный).

Информационное сообщение для маршрутов с особыми условиями, например:

notification_border_color — цвет рамки предупреждения (#e37f17);

notification_background — цвет фона (#f6f1ec);

notification_color — шрифт текста предупреждения (#373f47).

transfer_font_color - цвет надписи (#373f47);

transfer_background - цвет фона (#f6f7f8);

transfer_background_hover - цвет фона при наведении курсора (#f6f7f8).

Если вы хотите установить на странице два поисковых виджета, то строку типа <script src="https://new-widget.kiwitaxi.com/static/js/kiwitaxi-search.js"></script>, которая находится в конце кода, нужно удалить из кода первого виджета и оставить в коде последнего виджета.


Такая простая настройка поможет вам адаптировать виджеты для вашего сайта. Надеемся, что статья оказалась полезной, а если остались вопросы, — напишите нам на cpa@kiwitaxi.com