Трекинг виджет

Предназначен для отслеживания посылок СДЭК, Почта, Деловые линии и других ТК

Демонстрация работы

Примеры трек-кодов:
СДЭК 10078685776, Почта России 80083203400637, Деловые Линиии 50596460

Показывает трек движения отправления по выбранным вами транспортным компаниям.

Важно: информация только по вашим отправлениям, использовать данный виджет посторонние люди не смогут - только ваши клиенты.

Основные возможности

  • Позволяет отследить трек доставки отправления нужными вам транспортными компаниями:
    Яндекс Доставка, СДЭК, Почта России, DPD, Деловые Линии, ПЭК, Dostavista, КИТ, Байкал Сервис, Желдорэкспедиция, Возовоз, Энергия, 5POST, Магнит Пост, Постаматы «Халва Экспресс», Grastin, Logsis

    Выберите нужные транспортные компании - они автоматически появятся в виджете.

    В настоящее время отслеживание доступно для транспортных компаний СДЭК, Деловые Линии и Почта России. Другие добавим по вашему запросу.

  • Кастомизация под стиль сайта через css

    Настроить внешний вид можно с помощью css под дизайн конкретного сайта (цвета, шрифт, форма и расположение блоков)

  • Простая настройка и установка на любую страницу сайта

    Этот виджет вы можете встроить в любой сайт, подключить к любой CMS, разрешающей использование внешних скриптов. Для этого достаточно разместить код виджета в нужное место на сайте.

  • Функции обратного вызова для гибкой встройки в сайт

    Доступные события смотрите ниже в блоке Подключение и настройка.


Подключение и настройка

1. Создайте и настройте аккаунт в сервисе eShopLogistic. Порядок действий описан здесь.

2. Выполните подключение виджета к сайту по документации ниже.

Если что-то не получается - напишите нам через Telegram, чат или в раздел «Поддержка» в нашем кабинете, мы обязательно поможем!


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

Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - data-key.

Параметр Описание
data-key Ключ виджета. Указан в настройках виджета на вкладке «Подключение на сайте».

Параметры, отмеченные , - обязательны.

Доступно 6 функций обратного вызова для каждого ключевого события или ошибки:

  • onLoadApp - Загрузка виджета;
  • onFoundTrack - информация по трек-коду найдена;
  • onNotFoundTrack - информация по трек-коду не найдена;
  • onErrorTrack - ошибка получения информации по трек-коду;
  • onErrorService - ошибка сервиса;
  • onSelectedService - выбор службы доставки из списка.

Пример использования:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('eShopLogisticWidgetFindPackage');
    if(root) {
        root.addEventListener('eShopLogisticWidgetFindPackage:onFoundTrack', (event) => {
            console.log('Событие onFoundTrack', event.detail)
        })
    }
})
</script>
1

После регистрации на нашей платформе добавьте ключ доступа и нужные вам службы доставки.

Добавление ключа доступа

2

Добавьте к ключу виджет типа Отслеживание заказов «Где посылка?».

Выбор виджета

3

Настройте параметры и функционал виджета по документации.

Выбор виджета

4

Для подключения на сайт в параметре data-key используйте ключ виджета.

Ключ виджета

5

Общий порядок действий для подключения сервиса eShopLogistic на ваш сайт или в МойСклад описан здесь. Подключайтесь по документации и используйте все возможности интеграции со службами доставки для вашего бизнеса.

1. Добавить блок виджета:

<div id="eShopLogisticWidgetFindPackage" data-lazy-load="false" data-key="000000-00-00"></div>

2. Настроить событие запуска виджета (при data-lazy-load="true"):

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('ваш_элемент').addEventListener('click', event => {
            document.getElementById('eShopLogisticWidgetFindPackage').dispatchEvent(new CustomEvent('eShopLogisticWidgetFindPackage:loadApp'))
        })
    })
</script>

3. Подключить виджет:

<script src="https://api.esplc.ru/widgets/findPackage/app.js"></script>