Интеграция с Tilda

Расскажем, что делать, если Ваш магазин на Tilda. Вот пример!

Устанавливаем Salesbeat

Вот пример интеграции на Tilda.

Код интеграции необходимо вставлять в блоке HEAD всех страниц сайта, чтобы интеграция корректно работала на всех страницах сайта, в том числе с каталогом товаров Тильда.

Для этого переходим в личном кабинете Тильда в наш сайт и справа вверху жмём кнопку «Настройки сайта». На открывшейся странице в блоке слева выбираем пункт Ещё (самый нижний пункт меню), находим блок «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD» и жмём «Редактировать код». В открывшемся окне необходимо ввести весь код, приводимый ниже. Если вы не можете найти поле, куда вводить код — пожалуйста, посмотрите видео выше на этой странице или напишите нам в чат на сайте, мы поможем!

Вставляем код:


<!-- BEGIN SALESBEAT CONFIG FOR TILDA -->
<script>var salesbeatTildaConfig = { token: 'YOUR_API_TOKEN' }</script>
<script src="https://app.salesbeat.pro/static/widget/js/widget.js"></script>
<!-- END SALESBEAT CONFIG FOR TILDA -->

Отредактируем вставленный текст – зададим API-токен из личного кабинета Salesbeat (его нужно вставить вместо 'YOUR_API_TOKEN').

Для задания веса и габаритов товаров — воспользуйтесь каталогом товаров (Размеры задаются в карточке редактирования товаров — в подразделе "Характеристики").

Добавляем Salesbeat в карточку товара

Для того, чтобы добавить Salesbeat в карточку товара нужно в блок кода (из первого шага) добавить следующее содержание:


<!-- BEGIN SALESBEAT WIDGET FOR TILDA -->
<style>
    /* Тут можно стилизировать виджет с помощью CSS */
    .salesbeat-deliveries {
        margin-top: 30px;
    }
</style>
<script src="https://app.salesbeat.pro/static/tilda/salesbeat-tilda-widget-v1.0.js"></script>
<!-- END SALESBEAT WIDGET FOR TILDA -->

После изменений не забудьте переопубликовать все страницы (кнопка "Опубликовать все страницы" на странице с проектом).

Добавляем Salesbeat в корзину

Для того, чтобы добавить Salesbeat в корзину нужно:

Перейти к редактированию "контента" корзины (обычно корзина находится в хедере или футере в тильде) и добавить там два "поля для ввода":

Первое заполнить следующими полями (если уже есть поле с типом "Варианты доставки" – его нужно удалить или выключить):
- Тип – "Варианты доставки"
- Заголовок поля – Доставка
- Варианты значения –
  Salesbeat = 777
  Dismiss
- Имя переменной – Delivery
- И поставить галочку "Обязательно для заполнения"
А второе:
- Тип – "Скрытое поле"
- Имя переменной – SalesbeatDeliveryInformation

Далее, в блок кода (из первого шага) добавить:


<!-- BEGIN SALESBEAT CART-WIDGET FOR TILDA -->
<style>
    /* Тут можно стилизировать виджет корзины */
    #sb-cart-widget .wdel2 { font-family: "Open Sans", Arial, sans-serif; }
    #sb-cart-widget .wdel2-inner {
        border: transparent;
        border-radius: 0;
    }
    .t706__cartwin_showed { z-index: 9999; }
    .t450__burger_container { z-index: 9998; }
</style>
<script src="https://app.salesbeat.pro/static/widget/js/cart_widget.js"></script>
<script src="https://app.salesbeat.pro/static/tilda/salesbeat-tilda-cart-widget-v1.0.js"></script>
<!-- END SALESBEAT CART-WIDGET FOR TILDA -->

При необходимости можно отредактировать внешний вид виджета через CSS. Дополнительные CSS стили для товарного виджета можно добавить как в самой Тильде, так и в админке Salesbeat (https://app.salesbeat.pro/#/widget, Расширенные настройки).

Иллюстрация данного процесса есть и в картинках:

Найдём корзину и перейдём к её "Контенту"

Выгружаем заказы в службу доставки

Salesbeat позволяет легко выгружать созданные заказы в личные кабинеты служб доставки, например, СДЭК и Boxberry.

Чтобы заработала выгрузка заказов, в тильде заходим в Настройки сайта -> Формы -> добавляем Webhook на адрес, который вы найдёте здесь (WEBHOOK URL). В настройках вебхука проставляем галочки: «Посылать Cookies», «Передавать данные по товарам в заказе - массивом», «Передавать externalid в товарах». Галочку «Отправлять данные в виде application/json» — не проставляем, она должна быть снята.

Когда тильда нас спросит, подключить ли созданный Webhook ко всем формам на сайте — выбираем нет, не подключать ко всем формам.

Устанавливаем webhook в корзину в Тильде, чтобы в него передавались данные заказов. Для этого в блоке корзины жмём на кнопку Контент и в открывшемся окне выбираем созданный Webhook в блоке «Подключенные сервисы».

Затем в этом же окне в блоке «Поля для ввода» добавляем ещё одно скрытое поле в корзине с именем SalesbeatDeliveryJson и пустым значением (пожалуйста, не перепутайте, SalesbeatDeliveryJson — это именно «имя переменной», «значение» должно быть пустым).

Здесь надо заполнить данные об отправителе и указать ID ПВЗ, из которых будет отправка. Если курьер к вам сам приезжает забирать — укажите просто ближайший к вам. Если ID ПВЗ не знаете, напишите адрес, мы найдем ID и пришлем вам.

После этого опубликуем все страницы нашего сайта. Созданные заказы будут попадать в личный кабинет Salesbeat на вкладку Выгрузка заказов, откуда вы быстро сможете передать их в доставку. Вжух!

Опциональные расширения

В salesbeatTildaConfig можно передать дополнительные параметры для выполнения отдельных задач:

withoutPayForDelivery — опциональный параметр, если он передан и его значение true, то стоимость доставки не будет добавляться к стоимости заказа в Tilda

deliveryNecessity — опциоанальный параметр, может иметь вид:
deliveryNecessity: {needFor: {'productNames': ['iphone', 'брелок']}} — доставка необходима только для товаров, в названии которых есть слова «iphone» или «брелок», для всех остальных доставка не нужна (не будет показываться виджет в товарной карточке и в корзине)
deliveryNecessity: {notNeedFor: {'productNames': ['сертификат', 'карта']}} — доставка необходима для всех товаров, кроме тех, в названии которых есть слова «сертификат» и «карта», для сертификаторв и карт не будет показываться товарный виджет и виджет в корзине

additionalCallback — опциональный параметр, это callback, который вызывается, когда покупатель выбрал способ доставки (выбрал пункт выдачи или нажал кнопку Готово, чтобы подтвердить выбор курьерской доставки). В него передается массив всех данных о доставке (он описан здесь). Можно использовать, чтобы скрыть в корзине Тильды способы оплаты, недоступные для выбранного способа доставки.

saveDeliveryInformation — опциональный параметр, функция, сохраняющая данные доставки в Тильде. Можно использовать, чтобы разбить данные о доставке по разным полям в Тильде (для удобной выгрузки заказов дальше в CRM, например):


<!-- BEGIN SALESBEAT CONFIG FOR TILDA -->
<script>
function saveDeliveryInformation(data) {
    var deliveryType, address,
        cityName = data.short_name + '. ' + data.city_name + ', ' + data.region_name;

    if (data.pvz_id) {
        deliveryType = 'ПВЗ';
        address = data.pvz_address;
    } else {
        if (data.delivery_method_id.startsWith('post_')) {
            deliveryType = 'Почта';
            cityName = data.index + ', ' + cityName;
        } else {
            deliveryType = 'Курьер';
        }
        address = ' улица ' + data.street + ' дом ' + data.house + 
            (data.house_block ? ' строение/корпус ' + data.house_block : '') + 
            (data.flat ? ' квартира ' + data.flat : '')
    }
    document.querySelector('input[name=SalesbeatDeliveryInformation]').value = deliveryType;
    document.querySelector('input[name=SalesbeatDeliveryPrice]').value = data.delivery_price;
    document.querySelector('input[name=SalesbeatDeliveryDays]').value = data.delivery_days;
    document.querySelector('input[name=SalesbeatDeliveryAddress]').value = cityName + ', ' + address;
    document.querySelector('input[name=SalesbeatDeliveryComment]').value = data.comment;
}

    var salesbeatTildaConfig = {
        token: 'YOUR_API_TOKEN',
        saveDeliveryInformation: saveDeliveryInformation
    }
</script>
<script src="https://app.salesbeat.pro/static/widget/js/widget.js"></script>
<!-- END SALESBEAT CONFIG FOR TILDA -->

Если что-то не получилось – пишите скорее нам на hi@salesbeat.pro!