How to embed widgets on a site

  1. How to place widget code
  2. How to customize widget styles
  3. How to add multiple widgets to a single page
  4. How to set a search query in container code
  5. What area to select for a widget

How to place widget code

Code consists of three parts that can be arranged in different ways:

Code Where to place
Method 1 Method 2 Method 3

1. A widget API connection script:

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
In the element head In the element head In the element body

2. Code with widget parameters:

<script type="text/javascript">
  ...
</script>
In the element head In the element body In the element body

3. The div container where the widget will be displayed:

<div id="..."></div>
In the element body In the element body In the element body
Which method to choose
  1. The API connection script and code with parameters: In the head element.

    This method is recommended as it helps load widgets faster, increases the widget CTR and the number of clicks.

  2. The API connection script — in the head element, and code with parameters — in the body element.

    Use this method if you support a product search for a widget by parameters that can't be embedded in the head element. We recommend placing code with parameters as high as possible in the body element.

    In this case, widgets load as the page loads rather than immediately. That is, slower than in the first method.

    Tip. If you embed the API connection script in the head element (methods 1 and 2), place it in front of all scripts that load synchronously (scripts without the async attribute). This will speed up widget loading on the page.
  3. The script and code with parameters: In the body element.

    We don't recommend using this method, as it slows down widget loading. If you embed the script and code in the body element, we recommend placing them as high as possible.

Note. You can load widgets synchronously. However, the site will load more slowly then.
Example

Code in the head element:

<script src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
  window.YaMarketAffiliate.createWidget({
    containerId: "marketWidget",
    ...  // Widget parameters
  });
</script>

Code in the body element:

<div id="marketWidget"></div>

How to customize widget styles

You can customize the width and margins of a widget using CSS styles, for example:

<div id="..." style="width: 970px; padding: 0px 4px;" ...></div>
Possible styles
Attribute Description Value
width

Sets the widget width.

You can use any value that is acceptable in the CSS.

"970px"
padding

Sets the margin between the widget and the element it's embedded in.

You can use any value that is acceptable in the CSS.

If you specified:

  • 1 value: The margin is the same on all sides.
  • 2 values: The first value sets the margin from the upper and lower edges, the second — from the left and right ones.
  • 3 values: The first value sets the margin from the top edge, the second from the left and right edges, and the third from the bottom edge.
  • 4 values: The margins are set from the top, right, bottom, and left edges one by one.

"0px 4px"

If you want to set a widget's background, use the themeBackgroundColor parameter nested in params. For more information about using this element, see How to create widget code.

How to add multiple widgets to a single page

To place multiple widgets on a single page:

  1. Create an array of objects with widget settings in the script and call the YaMarketAffiliate.createWidget method for each of them.

    Example for two widgets:

    <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({
            containerId: "marketWidget1",
            type: "offers",
            params: {
              clid: 2310490,
              searchText: "apple ipad air",
              themeId: 2 
            }
          });
          w.YaMarketAffiliate.createWidget({
            containerId: "marketWidget2",
            type: "offers",
            params: {
              clid: 2310490,
              searchText: "samsung galaxy tab",
              themeId: 2 
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  2. Embed in your page code div containers for widgets.

    Example for two widgets:

    <div id="marketWidget1"></div>
    <div id="marketWidget2"></div>

How to set a search query in container code

You can use the widget container as a search element adding to it an attribute with the product name. To do this, specify the container selector in the searchSelector parameter and the attribute name in the searchSelectorAttr parameter. That's convenient if you need to embed the same widget script on different pages, changing the container code only.

Attention. If a search query is set in the container code, the widget is displayed later than performing a search using a text query: only after the full HTML code of the page loads. Users may not see the widget before it's loaded (for example, if they scroll through it or leave the page) and may fail to make paid clicks.
Example

In the head element:

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
  ...
  w.YaMarketAffiliate.createWidget({
    containerId: "marketWidget",
    type: "offers",
    params: {
      clid: 2310490,
      searchSelector: "div#marketWidget",
      searchSelectorAttr: "data-search-text",
      themeId: 2
    }
  });
  ...
</script>

In the body element:

<div id="marketWidget" data-search-text="Яндекс.Телефон"></div>

What area to select for a widget

All sizes are in pixels.

Yandex.Market “Where to buy a product” widgets
Widget Width Height
A list of offers with product descriptions. At least 240 At least 351
A list of offers without product descriptions At least 240 At least 129
A compact list of offers without product descriptions At least 240 At least 104
A detailed list of offers At least 240 At least 144
A carousel with a product description At least 240 Always 403
A carousel without product descriptions At least 240 Always 221
Yandex.Market “Collection of products” widgets and Yandex.Market recommendation widgets
Widget Width Height
Showcase At least 120 At least 200

For each line (starting from the second one): Ranging from 185 to 235.

A list of products At least 240 At least 110
A compact list of products At least 255 At least 420

For each line (starting from the seventh one): At least 50.

Carousel At least 300 At least 250
Gallery Always 300 Always 600
Yandex.Market widgets with information about products
Widget Width Height
Product specifications

At least 300

Arbitrary

Product reviews

At least 300

Arbitrary

Beru “Product” widgets
Widget Width Height
Detailed At least 240

At least 568 (for computers)

At least 418 (for mobile devices)

Compact At least 210 Always 36
Beru “Collection of products” widgets
Widget Width Height
Showcase At least 120

At least 231

For each line (starting from the second one): 185.

List At least 210 At least 97