Добавление виджета Яндекс.Такси на сайт в uKit

Для реализации данной инструкции на собственном сайте необходимо
приобрести премиум-пакет «Про».

Кнопка или виджет Яндекс.Такси помогут клиентам быстро вызвать такси и добраться до вашего магазина, ресторана, кинотеатра или банка.

В этой инструкции мы подробно рассмотрим механизм добавления виджета на свой сайт.

Шаг 1: настройка виджета

Первым делм нам необходимо перейти на сайт Виджеты Яндекс.Такси по ссылке https://tech.yandex.ru/taxi/widgets/.

Генератор виджета Яндекс.Такси

Для начала выберем тип настраиваемого виджета. Это может быть Бейдж, Кнопка, Виджет с картой или ссылка. В левой части генератора Вы можете видеть предварительный просмотр настраиваемого виджета.

Настройка виджета Бейдж

Настройка виджета типа Бейдж

Первым делом Вы можете указать цвет Вашего виджета. Доступно всего три варианта.

Далее нам необходимо указать маршрут встраиваемый в виджет. Доступны три параметра:

  • Куда - если Вам необходимо, чтобы виджет такси строил маршрут до Вашего ресторана (магазина), этот вариант Ваш;
  • Откуда - если Вам необходимо доставить клиента, например, домой от Вашего ресторана (магазина), этот вариант Ваш;
  • Без адреса - в этом случае клиент сам будет решать куда и откуда ему ехать.

Обратите внимание, при выборе любого из значений меняются параметры идущие следом.

Если Вами выбран параметр Куда, Вы можете указать:

  • Адрес, до которого такси должно довезти клиента;
  • Заголовок виджета (три варианта на выбор);
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Если Вами выбран параметр Откуда, Вы можете указать:

  • Адрес, от которого такси должно увезти клиента;
  • Заголовок виджета (три варианта на выбор);
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Если Вами выбран параметр Без адреса, Вы можете указать:

  • Заголовок виджета (три варианта на выбор);
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Настройка виджета Кнопка

Настройка виджета типа Кнопка

Настройка виджета Кнопка практически ничем не отличается от Бейджа за исключением некоторых параметров.

Вы также можете указать цвет Вашего виджета. Доступно всего три варианта.

Далее нам необходимо указать адрес, до которого такси должно довезти клиента.

Затем, заголовок виджета (можете указать любой на свой выбор).

И после - подзаголовок. Доступно всего два параметра:

  • Указанный адрес (отображается указанный Вам адрес, до которого такси везёт клиента);
  • Стоимость поездки (в этом случае, виджет рассчитает примерную стоимость услуги).

В случаях, если Вам необходимо, чтобы виджет подсчитывал примерную стоимость услуги, необходимо также указать в соответствующих полях CLID (идентификатор клиента) и APIKEY (ключ API). Получить их можно на странице API прогноза стоимости по ссылке https://tech.yandex.ru/taxi/taxiapi/.

Напоследок Вы можете указать адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Настройка виджета с картой

Настройка виджета с картой

В первую очередь необходимо указать адрес, до которого такси должно довезти клиента.

Затем, Вы можете указать вместо карты своё изображение, воспользовавшись кнопкой Загрузить.

Далее Вы указываете заголовок виджета (можете указать любой на свой выбор).

В случаях, если Вам необходимо, чтобы виджет подсчитывал примерную стоимость услуги, необходимо также указать в соответствующих полях CLID (идентификатор клиента) и APIKEY (ключ API). Получить их можно на странице API прогноза стоимости по ссылке https://tech.yandex.ru/taxi/taxiapi/.

Напоследок Вы можете указать адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Настройка виджета ссылки

Настройка виджета ссылки

Сначала необходимо указать маршрут встраиваемый в виджет. Доступны три параметра:

  • Куда - если Вам необходимо, чтобы виджет такси строил маршрут до Вашего ресторана (магазина), этот вариант Ваш;
  • Откуда - если Вам необходимо доставить клиента, например, домой от Вашего ресторана (магазина), этот вариант Ваш;
  • Без адреса - в этом случае клиент сам будет решать куда и откуда ему ехать.

Обратите внимание, при выборе любого из значений меняются параметры идущие следом.

Если Вами выбран параметр Куда, Вы можете указать:

  • Адрес, до которого такси должно довезти клиента;
  • Заголовок виджета (три варианта на выбор);
  • Стоимость (в этом случае, виджет рассчитает примерную стоимость услуги).
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Если Вами выбран параметр Откуда, Вы можете указать:

  • Адрес, от которого такси должно увезти клиента;
  • Заголовок виджета (три варианта на выбор);
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

Если Вами выбран параметр Без адреса, Вы можете указать:

  • Заголовок виджета (три варианта на выбор);
  • Адрес сайта или код отслеживания CLID (здесь Вы можете указать адрес сайта, на котором планируете разместить виджет или CLID - идентификатор клиента).

После того, как закончите настройку виджета, нажмите кнопку Получить код в правом нижнем углу. В результате, откроется окно с кодом, который необходимо скопировать. Скоро он нам понадобится.

Шаг 2: размещение виджета на сайте

Перейдите на свой сайт в режиме редактирования и разместите в нужном месте страницы виджет HTML-код:

Виджет HTML-код

Откройте виджет для редактирования, и вставьте в него скопированный Вами ранее код виджета Яндекс.Такси.

Можете сохранить и опубликовать сайт. Пример работы виджета Вы можете увидеть ниже:

Результат работы виджета Яндекс.Такси
Понравился материал?
Вы можете воспользоваться услугами автора материала – исполнителя Divly!