---
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/en/llms.txt

# Using widgets

Yandex Go widgets are the links for websites in the pre-configured design that contain destination points, the user's geolocation access request function and allow you to connect API information about the trip.

Widgets help you to simplify the full-featured taxi service integration to your web resource. Clicking the widget opens the app or Yandex Go site with the parameters you specified and leaves it up to the user to only order a taxi.

{% list tabs %}

- Badge

  
  <div class="ya-taxi-widget"
      data-size="xs"
      data-theme="normal"
      data-title="Order a taxi"
      data-point-b="37.58814349999998,55.73384256900978"
      data-use-location="true"
  ></div>
  

- Button

  
  <div class="ya-taxi-widget" 
    data-size="s" 
    data-theme="normal" 
    data-title="Order a taxi"
    data-description="L'va Tolstogo, 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>

  

- Widget with an image

  
  <div class="ya-taxi-widget" 
    data-size="m" 
    data-theme="normal" 
    data-title="Order a taxi"
    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>

- Custom layout

  
  <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">Order a taxi</a></div>
    <div data-disclaimer="true"></div>
  </div>


{% endlist %}

To create a widget use the constructor.


## Installing a widget {#widget-setup}


{% note alert %}

Resource `yastatic.net/taxi-widget/ya-taxi-widget.js` returns the widget code using `utf-8`. If your site uses a different encoding, add the `charset= "UTF-8"` parameter to the widget code:
```

```

{% endnote %}

To add the Yandex Go widget to your site:

1. Add the `DIV` element to the body of your site page with the widget parameters, for example:
    ```
    <div class="ya-taxi-widget"
    data-size="s"
    data-theme="normal"
    data-title="Order a taxi"
    data-point-b="37.58814349999998,55.73384256900978"
    data-use-location="true"
    …
    >
    </div>
    ```
    
1. On the same page, add the widget script:
    ```
    
    ```
    
## Widget parameters {#widget-settings}

The Yandex Go widget can contain the following parameters:

```
<div class="ya-taxi-widget"
    [data-size](*data-size)="xs|s|m"
    [data-theme](*data-theme)="normal|dark|action"
    [data-title](*data-title)="widget name"
    [data-description](*data-description)="widget description"
    [data-point-a](*data-point-a)="<longitude>,<latitude>"
    [data-point-b](*data-point-b)="<longitude>,<latitude>"
    [data-use-location](*data-use-location)="<true|false>"
    [data-proxy-url](*data-proxy-url)="Proxy URL"
    [data-clid](*data-clid)="API User ID"
    [data-apikey](*data-apikey)="API key"
    [data-picture](*data-picture)="Image URL"
    [data-nonce](*data-nonce)="nonce attribute"
    [data-zoom](*data-zoom)="map scale"
    [data-custom-layout](*data-custom-layout)="<true|false>"
    [data-ref](*data-ref)="ID in the partner program or resource"
    …>
</div>
```

**data-size**
:   Widget type. Possible values:
    - `xs` is a badge (small button).
    - `s` is a button.
    - `m` is a widget with an image. Element with a call button, map, or any image.

**data-theme**
:   Widget theme. Possible values:
    - `normal` for standard theme. Default value.
    - `dark` for dark theme. Currently, the dark theme is only supported for the `data-size="xs"` badge and `data-size="m"` widget.
    - `action` for yellow theme. At the moment the yellow theme is only supported for the `data-size="xs"` badge and `data-size= " s"` button.

**data-title**
:   Name of the widget, for example «Taxi to Yandex».

**data-description**
:   Widget description, such as «L'va Tolstogo, 16». Optional parameter.

**data-point-a**
:   Departure point coordinates in the format: `<longitude>,<latitude>`. Optional parameter.
:   To find out the longitude and latitude of the address, use [Geocoder](https://tech.yandex.ru/maps/geocoder/).

**data-point-b**
:   Departure point coordinates in the format: `<longitude>,<latitude>`.
    
    To find out the longitude and latitude of the address, use [Geocoder](https://tech.yandex.ru/maps/geocoder/).

**data-use-location**
:   Indicates whether the user's location is being used. Possible values:
    - `false` means use of the user's location data is disabled. Default value.
    - `true` means the value for the `data-point-a` parameter will not be taken into account; the departure point will be obtained from the user's location data.

**data-picture**
:   URL of the image that can be displayed in the widget with an image (`data-size= " m"`) instead of a map. Optional parameter.

**data-nonce**
:   Nonce attribute.

**data-zoom**
:   The scale of the map for the widget with an image (`data-size= " m"`). The default value is 17.

**data-custom-layout**
:   Feature of the [custom layout of a widget](#section_tz5_3qx_fdb).

**data-ref**
:   Your ID in the partner program or resource.
The Yandex Go widget can contain the following parameters:
### Widget link {#section_h2m_yj2_gdb}

The `data-proxy url` parameter determines how users are redirected to the Yandex Go site.

**data-proxy url**
:   The URL to go to the Yandex Go site. Example of this URL:

    ```js
    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
    ```
    
    You do not need to put the coordinates in the link. The `{start-lat}`, `{start-lon}`, `{end-lat}` and `{end-lon}` parameters automatically receive values from the widget settings.
    
    If the action takes place from a mobile device that does not have the Yandex Go application installed, the user will be redirected to the app store of the corresponding platform (Google Play/App Store). To redirect such users to the Yandex Go mobile site, you need to replace the numerical value of the `appmetrica_tracking_id` parameter links to `25395763362139037`.
    
    For more information, see the link parameters and redirect logic in the [Forming links](deeplinks.md) section.

### How the trip cost is displayed {#section_wmn_2rx_fdb}

To display the trip cost in the widget, use the following parameters:

**data-clid**
:   API client ID for authorization. To get an ID, fill out the form on the [API for price forecasting](https://tech.yandex.ru/taxi/taxiapi) page.

**data-apikey**
:   API key for authorization. To get a key, fill out the form on the [API for price forecasting](https://tech.yandex.ru/taxi/taxiapi) page.

### Widget custom layout {#widget-settings}

Widget with custom layout (`data-custom-layout= " true"`) allows you to display information without using styles. In this case, the widget content can be placed in other page elements. To do this, set the following options for page elements:

- `data-title="true"` is the title element.
- `data-link="true"` is the link element. We do not recommend setting links in iframe or using the `target="_blank"` parameter, since some browsers may block the link from opening in a new window.
- `data-description= " true"` is the subtitle element, or the cost of the trip.
- `data-disclaimer="true"` is a warning with text about the cost of sending a car out. When using a widget, this text is displayed automatically. For widgets with custom layout, this text must be displayed next to it with a link.
    Warning text: «Approximate cost of the route specified with Economy class fare. The price may differ due to demand and availability of taxis. Read more at taxi.yandex.ru»

## Examples of widgets {#examples}

{% list tabs %}

- Badge

  
  <div class="ya-taxi-widget" 
    data-size="xs" 
    data-theme="dark" 
    data-title="Order a taxi"
    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="Order a taxi"
  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>
  ```

- Button

  
  <div class="ya-taxi-widget"
    data-size="s"
    data-theme="normal"
    data-title="Order a taxi"
    data-description="Lva Tolstogo, 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="Order a taxi"
  data-description="L'va Tolstogo, 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>
  
  ```
  

- With map and API

  
  <div class="ya-taxi-widget"
    data-size="m"
    data-theme="normal"
    data-title="Order a taxi"
    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="Order a taxi"
  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>
  ```
  

- Custom layout

  
  <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">Order a taxi</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">Order a taxi</a></div>
  <div data-disclaimer="true"></div>
  </div>
  ```
  

- Link

  ```
  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]: Widget type. Possible values:
- `xs` is a badge (small button).
- `s` is a button.
- `m` is a widget with an image. Element with a call button, map, or any image.

[*data-theme]: Widget theme. Possible values:
- `normal` for standard theme. Default value.
- `dark` for dark theme. Currently, the dark theme is only supported for the data-size="xs" badge and data-size="m" widget.
- `action` for yellow theme. At the moment the yellow theme is only supported for the data-size="xs" badge and data-size= " s" button.

[*data-title]: Name of the widget, for example “Taxi to Yandex”.

[*data-description]: Widget description, such as “L'va Tolstogo, 16”. Optional parameter.

[*data-point-a]: Departure point coordinates in the format: `<longitude>`,`<latitude>`. Optional parameter.

[*data-point-b]: Departure point coordinates in the format: `<longitude>`,`<latitude>`.
To find out the longitude and latitude of the address, use [Geocoder](https://yandex.ru/maps-api/products/geocoder-api).

[*data-use-location]:Indicates whether the user's location is being used. Possible values:
- `false` means use of the user's location data is disabled. Default value.
- `true` means the value for the `data-point-a` parameter will not be taken into account; the departure point will be obtained from the user's location data.

[*data-proxy-url]: The URL to go to the Yandex Go site. Example of this 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
```
You do not need to put the coordinates in the link. The `{start-lat}`, `{start-lon}`, `{end-lat}` and `{end-lon}` parameters automatically receive values from the widget settings.
If the action takes place from a mobile device that does not have the Yandex Go application installed, the user will be redirected to the app store of the corresponding platform (Google Play/App Store). To redirect such users to the Yandex Go mobile site, you need to replace the numerical value of the `appmetrica_tracking_id` parameter links to `25395763362139037`.
For more information, see the link parameters and redirect logic in the [Forming links section](https://yandex.com/support/taxi-distr/en/api/deeplinks.md).

[*data-clid]: API client ID for authorization. To get an ID, fill out the form on the [API for price forecasting](https://tech.yandex.ru/taxi/taxiapi) page.

[*data-apikey]: API key for authorization. To get a key, fill out the form on the [API for price forecasting](https://tech.yandex.ru/taxi/taxiapi) page.

[*data-picture]: URL of the image that can be displayed in the widget with an image (`data-size`= "`m`") instead of a map. Optional parameter.

[*data-nonce]: Nonce attribute.

[*data-zoom]: The scale of the map for the widget with an image (`data-size`= "`m`"). The default value is 17.

[*data-custom-layout]: 
Feature of the [custom layout of a widget](#widget-settings).

[*data-ref]: Your ID in the partner program or resource.