How to create widget code manually

  1. Structure
  2. Parameter values
  3. Handling successful loads and errors

Structure

Widget code consists of two parts:

  1. A widget script (we recommend embedding it in the head element as close as possible to its beginning):

    <script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
    <script type="text/javascript">
      (function (w) {
        function start() {
          w.removeEventListener("YaMarketAffiliateLoad", start);
          w.YaMarketAffiliate.createWidget({
            /* Required parameters */
            containerId: ...,
            type: ...,
            /* Optional parameters */
            fallback: ...,
            rotate: ...,
            /* Required parameter */
            params: {
              /* Required parameters */
              clid: ...,
              themeId: ...,
              themeButtonName: ...,
              searchModelIds: ..., /* or */ searchSkuIds: ..., /* or */ searchText: ..., /* or */ searchSelector: ..., /* or */ searchImageUrl: ..., /* or */ searchImageSelector: ...,
              /* Optional parameters */
              searchSelectorAttr: ...,
              searchType: ...,
              defaultRegion: ...,
              searchCount: ...,
              searchMatch: ...,
              searchSort: ...,
              searchInStock: ...,
              searchPromoTypes: ...,
              searchCategoryIds: ...,
              searchPriceFrom: ...,
              searchPriceTo: ...,
              searchShops: ...,
              searchShopsRecommended: ...,
              searchVendorIds: ...,
              searchLocalOffersFirst: ...,
              searchFilters: ...,
              themeBackgroundColor: ...,
              themeRows: ...,
              themeShowImage: ...,
              themeShowProductName: ...,
              linkToMarket: ...,
              specificationGroups: ...,
              reviewsCount: ...,
              sovetnikPromo: ...,
              metrikaCounterId: ...,
              vid: ...
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  2. The div container that the widget will be displayed in (embed it in the body element in the place where you want to show the widget). ID: The containerId parameter value.

    <div id="..."></div>
Tip. You can customize the widget width using CSS styles. Example:
<div id="..." style="width: 970px;" ...></div>

Parameter values

Parameters Description Supported services Value example
containerId *

ID of the element the widget will be located in.

Yandex.Market, Beru

"marketWidget"

type *

Widget type:

Yandex.Market widgets
Beru widgets

Yandex.Market, Beru

"offers"

fallback

Displaying the Take a look at these offers recommendation widget instead of the original Yandex.Market widget if no products are found for it.

For more information, see Replacing a Yandex.Market widget with a recommendation widget.

Yandex.Market

false
rotate

Displaying an appropriate Beru widget instead of a Yandex.Market widget or vice versa.

For more information, see Widgets auto rotate.

Yandex.Market, Beru

false
params *

An object with widget parameters.

Yandex.Market, Beru

Parameters nested in params
clid *

Your Yandex.Market partner ID.

You can find it out from your account manager or in the Yandex.Distribution interface, on the Products page.

Yandex.Market, Beru

2310490

themeId *

Widget type.

Yandex.Market widgets

Values for the Where to buy a product widgets:

  • 1 — Product or offer feed.
  • 3 — Offer feed (without product descriptions).
  • 2 — List of offers and product.
  • 4 — List of offers (without product descriptions).
  • 9 — List of offers (without product descriptions, compact).
  • 10 — Detailed list of offers.

Values for the Collection of products widgets and recommendation widgets:

  • 1 — Showcase.
  • 2 — Gallery.
  • 3 — Carousel.
  • 4 — List of products.
  • 5 — Compact list of products.

Value for widgets with product information: 1.

Beru widgets

Values for the Product widgets:

  • 1 — Detailed.
  • 2 — Compact.

Values for the Collection of products widgets:

  • 1 — Showcase.
  • 2 — List.

Yandex.Market, Beru

2

themeButtonName

The name of the button to click through to Yandex.Market, Beru, or a store's site:

  • see“View”.
  • open“Open”.
  • go_to“Go to”.
  • more_info“Learn more”.
  • to_shop“To store”.
  • buy“Buy”.
  • make_order“Order”.

The default value is see (“View”).

According to Yandex.Market statistics, button names like “View”, “Open”, “Go to”, and “Learn more” bring more clicks than others.

Yandex.Market, Beru more_info

searchModelIds / searchSkuIds / searchText / searchSelector / searchSelector and searchSelectorAttr / searchCategoryIds / searchImageUrl / searchImageSelector **

Restrictions:

Yandex.Market (except searchSkuIds), Beru

See the sections Searching products for widgets and Selecting a Yandex.Market recommendation widget

searchType

Type of a Yandex.Market recommendation widget. Learn more.

Yandex.Market

"recommended"

defaultRegion

The default region for displaying offers.

If the user's region isn't defined or the service doesn't work there, offers are shown for the region set in the defaultRegion parameter.

If the defaultRegion parameter is omitted, offers are shown for Moscow.

Yandex.Market, Beru

"Минск"

searchCount

Number of products or offers per widget:

  • For Yandex.Market widgets: From 6 to 30.
  • For Beru widgets: From 1 to 30.

By default, there are 6 products or offers per widget.

Note. There may be fewer products or offers in a widget if the required number wasn't found. For example, a product is only placed by one store.

Yandex.Market, Beru

10

searchMatch

Searching products by an exact-match query (with all the query words included).

Used only with the searchText or searchSelector parameters.

Yandex.Market

"exact"
searchSort

Sorting products and offers.

Enables the display of products and offers in a sequence that you find convenient.

Types of sorting:

  • popular — By popularity.
  • aprice — Cheap first.
  • dprice — Expensive first.
  • discount_p — By discount amount.
  • rorp — By price and rating.
  • quality — By best rating.
  • opinions — By review.
  • ddate — By novelty.

The default sorting type is by popularity.

For more information, see Sorting products and offers.

Yandex.Market, Beru

"aprice"

searchInStock

A filter by products on sale.

Attention. Used only for the Yandex.Market Where to buy a product widgets.

If the parameter value is false, the widget may show offers of products that are no longer on sale. In this case, instead of the list of offers, the user will see a message saying “Out of stock” and the recommended selection of products Viewed together with.

Default values:

The filter isn't supported for other search methods.

Yandex.Market

true

searchPromoTypes

A product filter by type of promotion.

Use this filter together with any mandatory search parameter so that a widget only displays promotional products.

Types of promotions:

Yandex.Market widgets
  • discount — Discount on the product.

  • promo_code — Promo code.
  • gift_with_purchase — Gift with a product purchase.

  • n_plus_m — Buy N items and get M of the same item for free.

For Yandex.Market widgets, you can specify one or more comma-separated promotion types in an array.

Beru widgets

The only possible value is discount: Discount on the product.

Yandex.Market, Beru

["discount"]

["promo_code", "gift_with_purchase"]

searchCategoryIds

A filter by product category. Specify category IDs separated by commas.

Attention.

Used for such Yandex.Market widgets as Where to buy a product and Collection of products, some recommendation widgets, widgets with product information, and Beru widgets.

You can only specify one category ID for Yandex.Market recommendation widgets and Yandex.Market widgets with product information.

How to find out the category ID

Open the category page on Yandex.Market or Beru and check out its URL. An ID is a set of numbers after “...?hid=”. Example:

https://market.yandex.ru/catalog/54726/list?hid=91491

https://beru.ru/catalog/81621?hid=14727164

Yandex.Market, Beru

[91072]

[91072, 91498]

searchPriceFrom

A product filter by price (“price from”). Specify the price in RUB. Only integers are allowed.

Yandex.Market, Beru

1000

searchPriceTo

A product filter by price (“price up to”). Specify the price in RUB. Only integers are allowed.

Yandex.Market, Beru

3000

searchShops

A filter by the domains of stores whose offers a widget should display. The domains are comma-separated.

Note. The widget will only contain offers from the store whose domain you specified. For example, a widget whose domain is shop123.ru won't show offers from another-shop123.ru.

Yandex.Market

["shop123.ru", "shop456.ru"]

searchShopsRecommended

A filter by products or offers from stores that a manufacturer recommends.

Use the parameter set to true to only show products and offers from manufacturer-recommended stores.

By default, all products or offers are displayed.

Yandex.Market

true

searchVendorIds

A filter by manufacturers whose products you want to show in a widget. Specify manufacturer IDs separated by commas.

How to find out the manufacturer ID
Yandex.Market

Open the manufacturer's page (for example, using a search) and check out the page URL. The manufacturer ID is a set of numbers after “...brands/”.

For example: https://market.yandex.ru/brands/143.

Beru

Open the category page that contains the manufacturer's products, select the manufacturer from the list on the left, and check out the page URL. The manufacturer ID is a set of numbers after “...&glfilter=7893318%3A”.

For example: https://beru.ru/catalog/81623/list?hid=14193088&glfilter=7893318%3A948937.

Yandex.Market, Beru

[153043]

[153043, 153061]

searchLocalOffersFirst

First display in a widget all products or offers from the user's region and then those from other regions.

Use the parameter set to true to first display products and offers from the user's region.

Note. Check how this parameter works in practice. The parameter may decrease the number of clicks.

Yandex.Market

true
searchFilters

Search for products by specifications.

Used only with any mandatory search parameter.

Yandex.Market

glfilter=13476053%3A1
themeBackgroundColor

Widget background color and its opacity.

The service supports all the methods for setting colors and opacity described in the CSS standard. For example, you can set a gray background with any of the following values:

  • "gray";
  • "#808080";
  • "rgb(128,128,128)";
  • "hsl(0,0%,50%)".

You can set a gray background with an opacity of 30% using any of the following values:

  • "rgba(128,128,128,0.3)";
  • "hsla(0,0%,50%,0.3)".

Yandex.Market, Beru

"#808080"
themeRows

The number of rows per widget. By default, a widget has 1 row.

Attention. Used only for Yandex.Market widgets represented as a showcase (Collection of products and recommendation widgets) and for the Beru “Collection of products” widget represented as a list.

Yandex.Market, Beru

2

themeShowImage

Displaying product images in a widget.

If you want products to be displayed without images, use the parameter set to false. The default value is true: products are displayed with images.

Beru

true
themeShowProductName

Displaying product names in a widget.

If you want products to be displayed without names, use the parameter set to false. The default value is true: products are displayed with names.

Attention. Used only for the Beru “Product” widget of a compact size.

Beru

true
linkToMarket

Using in a widget links to Yandex.Market instead of links to store sites.

If the value is set to true, once the user clicks a product, its page on Yandex.Market opens. A partner will receive remuneration for click-throughs from Yandex.Market to the store's site or clicks on its phone number within 7 days.

The default value is false: a click on a product opens the offer that is first in the Top 6 section of the product card. The partner will receive remuneration for this very click.

To learn more about remuneration, see Remuneration for Yandex.Market products.

Attention. Used for the Yandex.Market Collection of products widgets, recommendation widgets, and the “Where to buy a product” widget if no product card is found.

Yandex.Market

true
specificationGroups

The number of expanded groups with product specifications in the Yandex.Market Product specifications widget.

Only integers are allowed. For example, if the 1 value is set, only the first group with product specifications is displayed (as a rule, “General specifications”), and the other groups are collapsed.

By default, all groups with product specifications are expanded.

Yandex.Market

1

reviewsCount

The number of reviews in the Yandex.Market Product reviews widget.

Possible values: from 1 to 10.

By default, a widget displays 3 reviews.

Yandex.Market

2
sovetnikPromo

Displaying the Yandex.Market Advisor section in a widget. To make the Advisor section appear in your widgets, write to support.

  • By default (if the section display is enabled by the support team, but the sovetnikPromo parameter is omitted), the section is displayed under certain conditions.

  • If you don't want the section to be displayed in your widget, set the sovetnikPromo parameter to false.

If the user clicks the Advisor section and installs the browser add-on, you'll receive remuneration for each click done by the user in the add-on. Learn more about remuneration.

Attention. Used only for the Yandex.Market Where to buy a product widgets, the “Collection of products” widget represented as a list, and widgets with product information. In other widgets, the Advisor section isn't displayed.

Yandex.Market

false
metrikaCounterId

Tag number in Yandex.Metrica. You can use it to track widget statistics. You can find the Yandex.Metrica tag number in the Settings menu.

Learn more about statistics.

Yandex.Market, Beru

12345

vid

A widget's additional ID. You can use it to track statistics just for this widget or compare statistics for the same widgets on different pages.

Possible values: from 0 to 999.

Yandex.Market, Beru

1

* Required parameter.

** One of these parameters is required.

Handling successful loads and errors

To perform the necessary actions in the event of a successful widget load or an error loading it, use the then and catch methods. You can use one or both of these methods.

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
  (function (w) {
    function start() {
      w.removeEventListener("YaMarketAffiliateLoad", start);
      w.YaMarketAffiliate.createWidget({
        ...   // Widget properties
      })
      .then(function(widget) {
        // Code for handling widget's successful loads
      })
      .catch(function(error) {
        // Code for handling errors loading the widget
      });
    }
    w.YaMarketAffiliate
      ? start()
      : w.addEventListener("YaMarketAffiliateLoad", start);
  })(window);
</script>