Виджеты СДЭК для вашего сайта
Два бесплатных блока: калькулятор доставки и карта пунктов выдачи с выбором города. Живые данные из официального API, настройка под ваш дизайн, вставка одним куском кода. Подходит для WordPress, Tilda, Bitrix, Wix, OpenCart, Joomla и самописного сайта — движок не важен, это обычный HTML.
Скопируйте и вставьте в то место страницы, где должен появиться калькулятор. Работает на любом движке — WordPress, Tilda, Bitrix, самописном сайте.
Второй виджет: пункты выдачи на карте
Карта с точками СДЭК и выбором города — для страницы «Доставка», «Контакты» или шага выбора пункта в корзине. Данные те же, что на сайте: адреса, режим работы, ближайшее метро, есть ли примерка и приём наличных.
Посетитель ищет свой город сам — поиск работает по всем городам, где у СДЭК есть пункты, а не по заранее заданному списку. Точки подтягиваются из официального API, поэтому закрывшийся пункт пропадает с карты сам: поддерживать список руками не нужно.
Тот же принцип: iframe, скрипт подстройки высоты и ссылка под виджетом.
Что входит в код и зачем там ссылка
В коде три части: iframe с самим калькулятором, небольшой скрипт, который подгоняет высоту фрейма под результат расчёта, и ссылка на сдэккалькулятор.рф под виджетом.
Ссылка — единственное условие бесплатного использования, и она намеренно стоит вне фрейма: содержимое iframe принадлежит нашему сайту, и ссылка внутри него для поисковика — наша собственная. Именно строка в вашей разметке делает обмен честным: вы получаете рабочий инструмент, мы — упоминание.
Всё остальное менять можно свободно: обернуть виджет в свой блок,
задать ширину, подобрать цвет под фирменный стиль. Не стоит только
прятать ссылку через display:none — поисковики такое
считают скрытой ссылкой и наказывают обе стороны.
Куда можно поставить: WordPress, Tilda, Bitrix и другие
Виджет — это обычный HTML, поэтому он работает везде, где можно вставить код. Ни плагинов, ни доступа к серверу, ни ключей не нужно.
| Движок | Куда вставлять |
|---|---|
| WordPress | Блок «Произвольный HTML» в редакторе Gutenberg или вкладка «Текст» в классическом редакторе. В Elementor — виджет «HTML» |
| Tilda | Блок T123 «HTML-код» из раздела «Другое» |
| 1С-Битрикс | Визуальный редактор → кнопка «Исходный код», либо инфоблок с типом «HTML» |
| Wix, uKit, Nethouse | Элемент «Встроить код» / «HTML-виджет» |
| OpenCart, CS-Cart, Joomla | Модуль «HTML-блок» или статическая страница в режиме исходного кода |
| Самописный сайт | Просто вставьте код в шаблон страницы |
Важно про конструкторы сайтов. Некоторые из них вырезают
теги <script> из HTML-блоков. Если так —
оставьте только <iframe> и ссылку: виджет
заработает, просто высота фрейма перестанет подстраиваться
под содержимое. Тогда задайте её вручную в style.
Что видит посетитель
- поля «Откуда» и «Куда» с подсказкой городов и кнопкой обмена;
- вес и габариты — можно скрыть, если у вас типовая посылка;
- таблицу тарифов: срок в рабочих днях и стоимость, самый дешёвый вариант отмечен;
- пояснение про тариф «Посылка» — он доступен только по договору и обычно заметно дешевле розничного.
Кому это полезно
- Интернет-магазинам — посетитель считает доставку до оформления заказа и не бросает корзину из-за неизвестной суммы;
- Мастерам и небольшим производствам — на странице «Доставка» вместо таблицы, которую надо обновлять руками;
- Блогам и справочникам про логистику — рабочий инструмент рядом со статьёй.
Отправляете регулярно? Тариф «Посылка» доступен только по договору со СДЭК: он дешевле розничного, позволяет принимать наложенный платёж и платить раз в месяц по счёту. Что даёт договор →
Вопросы о виджете
Ничего. Единственное условие — оставить ссылку на сдэккалькулятор.рф, она уже входит в код для вставки. Ни регистрации, ни ключей, ни ограничения по числу расчётов нет.
Нет. Виджет считает по официальному API и работает у любого сайта. Договор нужен, только если вы сами хотите отправлять по тарифу «Посылка» — он дешевле розничного.
Те же, что калькулятор на сайте: «Экспресс», «Магистральный экспресс», «Экономичная посылка» и, где доступна, договорная «Посылка». Для каждого — срок в рабочих днях и стоимость.
Да: есть светлая и тёмная тема, режим «как у посетителя» (по системной настройке), свой акцентный цвет, ширина, можно спрятать заголовок и блок габаритов.
Нет. Это iframe с атрибутом loading="lazy": браузер загружает виджет, только когда посетитель до него доскроллил. Ваши скрипты и стили он не трогает.
Проверьте, что вместе с iframe вставлен скрипт cdek-widget.js — он подгоняет высоту фрейма под результат расчёта. Без него высота остаётся фиксированной.
Калькулятор считает срок и стоимость, карта показывает, где забрать заказ. Это два независимых блока: можно поставить оба, можно только один — код у каждого свой.
Из официального API СДЭК, при каждом открытии виджета. Новый пункт появится сам, закрывшийся исчезнет — вручную список вести не нужно.
Город по умолчанию задаётся в настройке — карта откроется сразу на нём. Но поиск посетителю остаётся: он сможет выбрать любой другой город, где есть пункты СДЭК.
Отправляете регулярно? По договору дешевле
Тариф «Посылка», наложенный платёж и постоплата раз в месяц доступны только по договору со СДЭК. Оформление — один день, удалённо, без абонентской платы.