---
metadata:
  - name: generator
    content: Diplodoc Platform v5.48.2
alternate:
  - https://yandex.com/support/taxi-distr/en/api/widgets-about.md
  - https://yandex.com/support/taxi-distr/ru/api/widgets-about.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/taxi-distr/ru/llms.txt

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

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

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

{% list tabs %}

- Бейдж

  
  <div class="ya-taxi-widget"
    data-size="xs"
    data-theme="normal"
    data-title="Вызвать&nbsp;такси"
    data-point-b="37.58814349999998,55.73384256900978"
    data-use-location="true"
  ></div>

- Кнопка

  
  <div class="ya-taxi-widget" 
    data-size="s" 
    data-theme="normal" 
    data-title="На&nbsp;такси в&nbsp;Яндекс"
    data-description="Льва Толстого, 16" 
    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>

- Виджет с изображением

  
  <div class="ya-taxi-widget" 
    data-size="m" 
    data-theme="normal" 
    data-title="На&nbsp;такси в&nbsp;Яндекс"
    data-description="true"
    data-clid="fortest" 
    data-apikey="951a2f8d262547d8a5fc63f70cf54552" 
    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>

- Свободное оформление

  
  <div class="ya-taxi-widget"
    data-clid="fortest" 
    data-apikey="951a2f8d262547d8a5fc63f70cf54552" 
    data-use-location="true"
    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;ref=widget&amp;appmetrica_tracking_id=1178268795219780156&amp;utm_source=widget"
    >
  <div data-description="true"></div>
  <div><a href="#" data-link="true">Вызвать&nbsp;такси</a></div>
  <div data-disclaimer="true"></div>
  </div>

{% endlist %}

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

## Установка виджета {#widget-setup}

{% note alert %}

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

```

{% endnote %}

Чтобы добавить на свой сайт виджет Яндекс 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>
    ```
    
1. На этой же странице добавьте скрипт виджета:
    ```
    
    ```

## Настройки виджетов {#widget-settings}

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

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

### Базовые параметры {#widget-settings}

**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**
:   Координаты пункта отправления в формате `<долгота>,<широта>`. Необязательный параметр.
:   Значения долготы и широты адреса можно узнать при помощи [Геокодера](https://tech.yandex.ru/maps/geocoder/).

**data-point-b**
:   Координаты пункта назначения в формате `<долгота>,<широта>`.
    
    Значения долготы и широты адреса можно узнать при помощи [Геокодера](https://tech.yandex.ru/maps/geocoder/).

**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**
:   Признак [свободного оформления виджета](#section_tz5_3qx_fdb).

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

### Отображение стоимости поездки {#widget-settings}

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

**data-clid**
:   идентификатор пользователя API. Чтобы получить идентификатор, заполните анкету на странице [API прогноза стоимости](https://tech.yandex.ru/taxi/taxiapi).

**data-apikey**
:   Ключ API для авторизации. Чтобы получить ключ, заполните анкету на странице [API прогноза стоимости](https://tech.yandex.ru/taxi/taxiapi).

### Ссылка виджета {#widget-settings}

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

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

    ```js
    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`.
    
    Подробнее параметры ссылки и логика редиректов описаны в разделе [Формирование ссылок на заказ](deeplinks.md).

### Свободное оформление виджета {#widget-settings}

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

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

## Примеры виджетов {#examples}

{% list tabs %}

- Бейдж

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

  ```
  
  <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>
  ```

- Кнопка

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

  ```
  
  <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>
  ```

- С картой и API

  
  <div class="ya-taxi-widget"
    data-size="m"
    data-theme="normal"
    data-title="На&nbsp;такси в&nbsp;Яндекс"
    data-clid="ak230929"
    data-apikey="XaxOBAWpmKxUPFXZpzYzlgyNiLQicGssZvfCSfjw"
    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>

  ```
  
  <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>
  ```

- Свободное оформление

  
  <div class="ya-taxi-widget"
    data-clid="ak230929"
    data-apikey="XaxOBAWpmKxUPFXZpzYzlgyNiLQicGssZvfCSfjw"
    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>

  ```
  
  <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
  ```

{% endlist %}

[*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-а]: Координаты пункта отправления в формате `<долгота>`,`<широта>`. Необязательный параметр.

[*data-point-b]: Координаты пункта назначения в формате `<долгота>`,`<широта>`.
Значения долготы и широты адреса можно узнать при помощи [Геокодера](https://yandex.ru/maps-api/products/geocoder-api).

[*data-use-location]: Признак использования местоположения пользователя. Возможные значения:
- `false` — использование геоданных пользователя отключено. Значение по умолчанию.
- `true` — значение для параметра `data-point-a` не будет учитываться, пункт отправления будет получен из геоданных пользователя.

[*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`.
Подробнее параметры ссылки и логика редиректов описаны в разделе [Формирование ссылок на заказ](https://yandex.com/support/taxi-distr/ru/api/deeplinks.md).

[*data-clid]: Идентификатор пользователя API. Чтобы получить идентификатор, заполните анкету на странице [API прогноза стоимости](https://yandex.ru/dev/taxi/taxiapi/).

[*data-apikey]: Ключ API для авторизации. Чтобы получить ключ, заполните анкету на странице [API прогноза стоимости](https://yandex.ru/dev/taxi/taxiapi/).

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

[*data-nonce]: Nonce-атрибут.

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

[*data-custom-layout]: Признак [свободного оформления виджета](#widget-settings).

[*data-ref]: Ваш идентификатор в партнерской программе или ресурс.