Widget settings

Note. Predefined widgets support only the Yandex.Taxi design. Use the widget with custom layout for Yango.
  1. Widget parameters
  2. Widget link
  3. How the trip cost is displayed
  4. Widget custom layout

Widget parameters

The Yandex.Taxi widget can contain the following parameters:
<div class="ya-taxi-widget"
    data-size="xs|s|m"
    data-theme="normal|dark|action"
    data-title="widget name"
    data-description="widget description"
    data-point-а="<долгота>,<широта>"
    data-point-b="<долгота>,<широта>"
    data-use-location="<true|false>"
    data-proxy-url="Proxy URL"
    data-clid="User ID"
    data-apikey="API key"
    data-picture="Image URL"
    data-nonce="nonce attribute"
    data-zoom="map scale"
    data-custom-layout="<true|false>"
    …>
</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.

data-point-b

Departure point coordinates in the format: <longitude>,<latitude>.

To find out the longitude and latitude of the address, use 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.

Widget link

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

data-proxy url
The URL to go to the Yandex.Taxi 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.Taxi 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.Taxi 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 theForming links section.

How the trip cost is displayed

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

data-clid
Client ID for authorization. To get an ID, fill out the form on the API for price forecasting page.
data-apikey
API key for authorization. To get a key, fill out the form on the API for price forecasting page.

Widget custom layout

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”