Карточный виджет

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

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

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

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

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

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

<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: 'deliveryCard', // Тип виджета — всегда deliveryCard)
          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>