Инфо-виджет

Виджет устанавливается на странице с описанием товара и показывает самый быстрый вариант доставки товара курьером и в пункт самовывоза от каждой службы доставки. Так покупатели видят, какая служба доставки подходит им больше.

Данные виджетов формируются на основе:
  • габаритов товара (задаются в коде виджета);

  • условий доставки (настраиваются в личном кабинете Яндекс.Доставки);

  • города (указывает покупатель).

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

Вставьте код виджета на страницу сайта.

<head>
  ...
  <!-- Чтобы виджет загружался быстрее, рекомендуем размещать скрипт для подключения к API 
       виджетов и код виджета в элементе head. -->
  
  <!-- Подключение к API виджетов -->
  <script async src="https://widgets.delivery.yandex.ru/script/api"></script>

  <!-- Код виджета -->
  <script>
    (function(w) {
        function startWidget() {
            document.removeEventListener('YaDeliveryLoad', startWidget);
            w.YaDelivery.createWidget({
              containerId: 'myWidget', // Идентификатор HTML-элемента (контейнера), 
                                       // в котором будет отображаться виджет 
              type: 'deliveryInfo',    // Тип виджета — всегда deliveryInfo
              params: {
                apiKey: '01234567-89ab-cdef-f0f0-fedc-ba9876543210', // Авторизационный ключ
                senderId: 456,            // Идентификатор магазина в системе Яндекс.Доставки
                dimensions: {
                  width: 10, // Ширина упаковки с товаром в см
                  height: 10, // Высота упаковки с товаром в см
                  length: 10, // Длина упаковки с товаром в см
                  weight: 1,  // Вес упаковки с товаров в кг
                },
              },
            });
          }
        w.YaDelivery
            ? startWidget()
            : document.addEventListener('YaDeliveryLoad', startWidget);
    })(window);
  </script>        
  ...
</head>
<body>
  ...
  <!-- Контейнер, в котором будет отображаться виджет -->
  <div id="myWidget"></div>
    ...
</body>