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

Виджеты Яндекс Go — ссылки для веб-сайтов в заранее настроенном оформлении, которые содержат точки маршрута, функцию запроса доступа к геолокации пользователя и позволяют подключить API информацию о поездке.

Виджеты позволяют упростить полнофункциональную интеграцию сервиса вызова такси на ваш веб-ресурс. Переход по виджету открывает приложение или сайт Яндекс Go с указанными вами параметрами и оставляет за пользователем только подтверждение заказа машины.

Для создания виджета воспользуйтесь конструктором.

Установка виджетаУстановка виджета

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js" charset="UTF-8"></script>

Чтобы добавить на свой сайт виджет Яндекс Go:

1. В тело страницы вашего сайта добавьте элемент DIV с параметрами виджета, например:

   <div class="ya-taxi-widget"
   data-size="s"
   data-theme="normal"
   data-title="На&nbsp;такси в&nbsp;Яндекс"
   data-point-b="37.58814349999998,55.73384256900978"
   data-use-location="true"
   …
   >
   </div>
   

2. На этой же странице добавьте скрипт виджета:

   <script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
   

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

Виджет Яндекс Go может содержать следующие параметры:

<div class="ya-taxi-widget"
    data-size="xs|s|m"
    data-theme="normal|dark|action"
    data-title="название виджета"
    data-description="описание виджета"
    data-point-а="<долгота>,<широта>"
    data-point-b="<долгота>,<широта>"
    data-use-location="<true|false>"
    data-proxy-url="URL для проксирования"
    data-clid="идентификатор пользователя API"
    data-apikey="ключ API"
    data-picture="URL картинки"
    data-nonce="nonce-атрибут"
    data-zoom="масштаб карты"
    data-custom-layout="<true|false>"
    data-ref="идентификатор в партнерской программе или ресурс"
    …>
</div>

Базовые параметрыБазовые параметры

data-size

Тип виджета. Возможные значения:

• xs — бейдж (маленькая кнопка).
• s — кнопка.
• m — виджет с изображением. Элемент с кнопкой вызова, картой или произвольной картинкой.

data-theme

Тема виджета. Возможные значения:

• normal — стандартная тема. Значение по умолчанию.
• dark — темная тема. В данный момент темная тема поддерживается только для бейджа (data-size="xs") и виджета (data-size="m").
• action — желтая тема. В данный момент желтая тема поддерживается только для бейджа (data-size="xs") и кнопки (data-size="s").

data-title

Название виджета, например «На такси в Яндекс».

data-description

Описание виджета, например «Льва Толстого, 16». Необязательный параметр.

data-point-a

Координаты пункта отправления в формате <долгота>,<широта>. Необязательный параметр.

Значения долготы и широты адреса можно узнать при помощи Геокодера.

data-point-b

Координаты пункта назначения в формате <долгота>,<широта>.

Значения долготы и широты адреса можно узнать при помощи Геокодера.

data-use-location

Признак использования местоположения пользователя. Возможные значения:

• false — использование геоданных пользователя отключено. Значение по умолчанию.
• true — значение для параметра data-point-a не будет учитываться, пункт отправления будет получен из геоданных пользователя.

data-picture

URL изображения, которое можно отображать в виджете с изображением (data-size="m") вместо карты. Необязательный параметр.

data-nonce

Nonce-атрибут.

data-zoom

Масштаб карты для виджета с изображением (data-size="m"). Значение по умолчанию — 17.

data-custom-layout

Признак свободного оформления виджета.

data-ref

Ваш идентификатор в партнерской программе или ресурс.

Отображение стоимости поездкиОтображение стоимости поездки

Чтобы отобразить в виджете стоимость поездки, используйте следующие параметры:

data-clid

идентификатор пользователя API. Чтобы получить идентификатор, заполните анкету на странице API прогноза стоимости.

data-apikey

Ключ API для авторизации. Чтобы получить ключ, заполните анкету на странице API прогноза стоимости.

Ссылка виджетаСсылка виджета

Параметр data-proxy-url определяет способ перенаправления пользователя на сайт Яндекс Go.

data-proxy-url

URL для перехода на сайт Яндекс Go. Пример такого URL:

https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&start-lon={start-lon}&end-lat={end-lat}&end-lon={end-lon}&ref=widget&appmetrica_tracking_id=1178268795219780156&utm_source=widget

Подставлять координаты в ссылку не требуется — параметры {start-lat}, {start-lon}, {end-lat} и {end-lon} автоматически получают значения из параметров виджета.

Если переход осуществляется с мобильного устройства, на котором не установлено приложение Яндекс Go, то пользователь будет перенаправлен в магазин приложений соответствующей платформы (Google Play/App Store). Чтобы перенаправлять таких пользователей на мобильный сайт Яндекс Go, необходимо заменить числовое значение параметра appmetrica_tracking_id ссылки на 25395763362139037.

Подробнее параметры ссылки и логика редиректов описаны в разделе Формирование ссылок на заказ.

Свободное оформление виджетаСвободное оформление виджета

Виджет со свободным оформлением (data-custom-layout="true") позволяет показывать информацию без использования стилей. В этом случае, содержание виджета можно располагать в других элементах страницы. Для этого укажите следующие признаки для элементов страницы:

• data-title="true" — элемент заголовка.
• data-link="true" — элемент ссылки. Не рекомендуется устанавливать ссылки в iframe или использовать параметр target="_blank", так как некоторые браузеры могут заблокировать открытие ссылки в новом окне.
• data-description="true" — элемент подзаголовка или стоимости поездки.
• data-disclaimer="true" — предупреждение с текстом о стоимости подачи. При использовании виджета данный текст отображается автоматически. Для виджетов со свободным оформлением этот текст необходимо отображать рядом со ссылкой.
  Текст предупреждения: «Примерная стоимость поездки по указанному маршруту по тарифу «Эконом». Цена может отличаться в связи со спросом и наличием свободных такси. Подробнее на taxi.yandex.ru»

Примеры виджетовПримеры виджетов

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<div class="ya-taxi-widget" 
data-size="xs" 
data-theme="dark" 
data-title="Вызвать&nbsp;такси"
data-tariff="vip"
data-use-location="true"
data-ref="YOURSITE"
data-point-b="37.58814349999998,55.73384256900978" 
data-proxy-url="https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&amp;start-lon={start-lon}&amp;end-lat={end-lat}&amp;end-lon={end-lon}&amp;tariffClass={tariff}&amp;ref={ref}&amp;appmetrica_tracking_id=1178268795219780156"
></div>

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<div class="ya-taxi-widget" 
data-size="s" 
data-theme="normal" 
data-title="На&nbsp;такси в&nbsp;Яндекс"
data-description="Льва Толстого, 16" 
data-tariff="econom"
data-use-location="true"
data-ref="YOURSITE"
data-point-b="37.58814349999998,55.73384256900978" 
data-proxy-url="https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&amp;start-lon={start-lon}&amp;end-lat={end-lat}&amp;end-lon={end-lon}&amp;tariffClass={tariff}&amp;ref={ref}&amp;appmetrica_tracking_id=1178268795219780156"
></div>

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<div class="ya-taxi-widget" 
data-size="m" 
data-theme="normal" 
data-title="На&nbsp;такси в&nbsp;Яндекс"
data-clid="CLID" 
data-apikey="APIKEY" 
data-use-location="true" 
data-point-b="37.58814349999998,55.73384256900978" 
data-proxy-url="https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&amp;start-lon={start-lon}&amp;end-lat={end-lat}&amp;end-lon={end-lon}&amp;ref=widget&amp;appmetrica_tracking_id=1178268795219780156&amp;utm_source=widget"
>
</div>

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<div class="ya-taxi-widget"
data-clid="CLID"
data-apikey="APIKEY"
data-use-location="true"
data-tariff="econom"
data-ref="YOURSITE"
data-point-b="37.58814349999998,55.73384256900978"
data-custom-layout="true"
data-proxy-url="https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&amp;start-lon={start-lon}&amp;end-lat={end-lat}&amp;end-lon={end-lon}&amp;tariffClass={tariff}&amp;ref={ref}&amp;appmetrica_tracking_id=1178268795219780156"
>
<div data-description="true"></div>
<div><a href="#" data-link="true">Вызвать&nbsp;такси</a></div>
<div data-disclaimer="true"></div>
</div>

https://3.redirect.appmetrica.yandex.com/route?start-lat=LATITUDE-A&start-lon=LONGTITUDE-A&end-lat=LATITUDE-B&end-lon=LONGTITUDE-B&ref=widget