Как вставить виджеты на сайт

Как разместить код виджета

Код состоит из трех частей, которые можно расположить разными способами:

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

<script type="text/javascript">
  ...
</script>

<div id="..."></div>

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

<script type="text/javascript">
  ...
</script>

<div id="..."></div>

Какой способ выбрать

1. Скрипт для подключения к API и код с параметрами — в элементе head.

   Рекомендуемый способ — так виджеты загружаются быстрее, повышается CTR виджета и увеличивается количество кликов.

   Этот способ подходит, если вы вставляете на сайт один виджет или несколько виджетов с одинаковым кодом (например, настроен поиск по запросу из HTML‑элемента, в качестве которого используется заголовок статьи).

2. Скрипт для подключения к API — в элементе head, а код с параметрами — в элементе body.

   Используйте этот способ, если вы:

   • ищете товары для виджета по параметрам, которые нельзя поместить в элемент head;

   • используете несколько виджетов с различным кодом.

   Рекомендуем размещать код с параметрами как можно выше в элементе body.

   Если использовать этот способ, виджеты будут загружаться не сразу, а по мере загрузки страницы. То есть, медленнее, чем в первом варианте.

   Совет. Если вы вставляете скрипт для подключения к API в элемент head (способы 1 и 2), разместите его перед всеми скриптами, которые загружаются синхронно (скрипты без атрибута async). Это ускорит загрузку виджета на странице.
3. Скрипт и код с параметрами — в элементе body.

   Не рекомендуем использовать этот способ, он приводит к медленной загрузке виджетов. Используйте его только в том случае, если у вас нет доступа к элементу head.

   Если размещаете скрипт и код в элементе body, советуем расположить их как можно выше.

Как настроить ширину и отступы виджетов

Вы можете настроить ширину и отступы для виджетов с помощью CSS-стилей.

Чтобы настроить ширину и отступы:

Для конкретных виджетов

Добавьте к контейнеру div нужного виджета атрибут style с правилами для настройки стиля. Например:

<div id="..." style="width: 970px; padding: 0px 4px;" ...></div>
Скопировано

Для всех виджетов на странице

1. Настройте CSS-стиль для всех элементов одного класса. Например, в элемент head добавьте стиль с селектором .marketWidget и правилами для ширины и отступа:

   <style>
     /* Селектор .marketWidget применяет правила 
      * ко всем элементам с атрибутом class="marketWidget" */
     .marketWidget {  
       width: 970px;
       padding: 0px 4px;
     }
   </style>
   Скопировано

2. Добавьте атрибут class="marketWidget" ко всем контейнерам виджетов, чтобы к ним применялись правила из стиля. Например:

   <div class="marketWidget" id="widgetIntro"></div>
   ...
   <div class="marketWidget" id="widgetComparison"></div>
   Скопировано

Вы также можете изменить внешний вид виджетов с помощью различных параметров. Подробнее см. в разделе Вопросы по внешнему виду виджетов.

Как добавить несколько виджетов на одну страницу

Чтобы разместить несколько виджетов на одной странице:

1. Создайте в скрипте массив объектов с настройками виджетов и для каждого из них вызовите метод YaMarketAffiliate.createWidget.

   Пример для двух виджетов:

   <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. Разместите в коде страницы контейнеры div для виджетов.

   Пример для двух виджетов:

   <div id="marketWidget1"></div>
   <div id="marketWidget2"></div>
   Скопировано

Как задать поисковый запрос в коде контейнера

Какую область выделить под виджет

Все размеры указаны в пикселях.