Интеграция бонусной программы Mace Loyalty с сайтом на Tilda

О решении

Модуль бонусной системы для Tilda позволяет легко добавить программу лояльности в стандартную корзину вашего сайта. Покупатели увидят свои баллы и смогут применить их в один клик, не отвлекаясь от оформления заказа.

С какими картами работает модуль?

Модуль поддерживает два популярных формата:

Кэшбек-карты. Клиенты накапливают процент бонусов от суммы покупки, чтобы потратить их на следующие заказы.
Скидочные карты. Карта даёт фиксированный процент скидки на всю корзину.

Как это устроено?
Все правила начисления и списания уже настроены вами в «Конфигураторе» карт в личном кабинете Mace Loyalty. Модуль автоматически подхватывает эти настройки и применяет их, когда клиент вводит номер телефона.

Внешний вид и дизайн
Модуль легко адаптируется под дизайн вашего сайта. Для вашего удобства мы подготовили три стильные цветовые схемы:

Синяя
Серая
Белая

В этой статье мы разберем, как просто и быстро настроить модуль для вашего сайта на Tilda.

Настройки кода

⚠️

Перед началом работы обратитесь к вашему менеджеру в Mace Loyalty, чтобы получить данные для интеграции: clientId, secret, cardIssueURL

Основные настройки задаются в объекте MaceLoyaltySettings в начале скрипта:

const DesignVariant = {
  BLUE: 'blue',
  GREY: 'grey',
  WHITE: 'white',
};

const MaceLoyaltySettings = {
  // ОБЯЗАТЕЛЬНО: id компании в Mace Loyalty
  clientId: '',

  // ОБЯЗАТЕЛЬНО: секрет для доступа к API
  secret: '',

  // ОБЯЗАТЕЛЬНО: URL оформления карты (куда отправляем клиента, если карты нет)
  cardIssueURL: '',

  // ОПЦИОНАЛЬНО: способы оплаты, при которых блок лояльности не отображается
  // Значения берутся из атрибутов value инпутов name="paymentsystem"
  // Пример: <input type="radio" name="paymentsystem" value="cash" ...>
  forbiddenPayment: ['cash'],

  // ОПЦИОНАЛЬНО: цветовая схема блока (BLUE | GREY | WHITE)
  designVariant: DesignVariant.BLUE,
};

const API_HOST = 'https://maceloyalty.ru/tilda/api/v1';

Поля настроек

clientId (обязательно) — идентификатор компании в Mace Loyalty
secret (обязательно) — секретный ключ для авторизации в API
cardIssueURL (обязательно) — URL оформления карты лояльности. Выдаётся при подключении. Открывается в новой вкладке, если по номеру телефона карта не найдена и пользователь нажимает кнопку «Оформить карту»
forbiddenPayment (опционально) — массив системных кодов способов оплаты (значения атрибута value у input[name="paymentsystem"]), при которых блок лояльности скрывается, а карта не подгружается. Например, если вы не хотите чтобы при оплате наличными начислялись бонусы добавьте "cash" в массив forbiddenPayment

Примеры:

// Скрывать блок при оплате наличными
forbiddenPayment: ['cash']

// Скрывать блок при нале и банковском переводе
forbiddenPayment: ['cash', 'banktransfer']

// Не скрывать никогда (всегда показывать)
forbiddenPayment: []

designVariant (опционально) - вариант дизайна BLUE | GREY | WHITE. По умолчанию BLUE. Вы можете выбрать один из трех вариантов или изменить CSS стили по своему усмотрению

Настройка Tilda

Размещение JS кода на сайте

Для корректной работы, передаваемый код должен быть размещен на всех страницах сайта. Код можно разместить в блоке HTML (T123) или внутри HEAD (Настройки сайта -> Еще -> HTML-код для вставки внутрь HEAD). Код необходимо разместить между тегами <script></script>.

Снятие ограничений с платежных систем

Для того, чтобы скидки применялись в корзине, нам необходимо снять ограничения в Tilda. Перейдите в настройки платежных систем (Настройки сайта -> Платежные системы -> Общие настройки для платежных систем)

Настройка платежной системы Tilda для внедрения программы лояльности

В настройках установите следующие параметры:

Уровень проверки товаров из блоков перед переходом к оплате: Разрешать продавать товар без проверок
Уровень проверки цены доставки: Не проверять
Уровень проверки скидки: Не проверять

Пример настройки платежной системы для программы лояльности

Создание промокода для корректного срабатывания списания баллов и скидки

Перейдите в платежные системы -> раздел Промокоды

Расположение раздела промокоды в Tilda для настройки бонусной системы

Создайте промокод PERSONALCODE со следующими параметрами:

Промокод: PERSONALCODE
Скидка: 1
Количество: поле оставляем пустым
Срок действия: поле оставляем пустым
Описание: любой комментарий, который напомнит вам, что этот промокод нельзя удалять или менять

⚠️

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

Пример настроек промокода в Tilda для корректной работы системы лояльности

Создание вебхука для отправки информации о заказах в MaceLoyalty

Webhook выполняет ключевую функцию регистрации покупки клиента, именно поэтому данный hook следует отправлять только после оплаты. В качестве проверки используется Basic авторизация с ключом clientId:secret

Перейдите в Настройки сайта -> Формы и создайте новый Webhook

Расположение раздела настройки webhook в Tilda

Укажите следующие данные:

WEBHOOK URL: https://maceloyalty.ru/api/v1/tilda
API method: HEADER
API name: Authorization
API key: Basic секретный-ключ (секретный ключ выдается при подключении)
Дополнительные настройки: выставляем все галочки

API key получается путем кодирования переданной вам пары clientId:secret в формат Base64. Итоговая строка должна выглядеть так "Basic Y2xpZW50SWQ6c2VjcmV0". Для кодирования можно воспользоваться онлайн сервисом base64encode.org. В случае если вы не уверен, как правильно ввести строку, напишите нам и мы подскажем.

Настройка интеграции