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

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

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

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

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

Внимание

Ресурс yastatic.net/taxi-widget/ya-taxi-widget.js возвращает код виджета в кодировке utf-8. Если ваш сайт использует другую кодировку, добавьте в код виджета параметр charset="UTF-8":

<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}&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

Подставлять координаты в ссылку не требуется — параметры {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

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

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

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

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

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

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

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

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

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

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

URL для перехода на сайт Яндекс Go. Пример такого 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

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

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

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

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

Nonce-атрибут.

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

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

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

Предыдущая
Продвинутое формирование ссылок на установку
Следующая
Частые вопросы