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.

To create a widget use the constructor.

Installing a widgetInstalling a widget

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

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>
   

2. On the same page, add the widget script:

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

Widget parametersWidget parameters

The Yandex Go 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-а="<longitude>,<latitude>"
    data-point-b="<longitude>,<latitude>"
    data-use-location="<true|false>"
    data-proxy-url="Proxy URL"
    data-clid="API User ID"
    data-apikey="API key"
    data-picture="Image URL"
    data-nonce="nonce attribute"
    data-zoom="map scale"
    data-custom-layout="<true|false>"
    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.

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.

data-ref

Your ID in the partner program or resource.
The Yandex Go widget can contain the following parameters:

Widget linkWidget link

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:

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.

How the trip cost is displayedHow the trip cost is displayed

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

data-apikey

API key for authorization. To get a key, fill out the form on the API for price forecasting page.

Widget custom layoutWidget 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»

Examples of widgetsExamples of widgets

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<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>

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<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>

<script src="//yastatic.net/taxi-widget/ya-taxi-widget.js"></script>
<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>

<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">Order a taxi</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