Виджет на сайт

С помощью готового виджета можно показывать данные по программе лояльности на сайте без привлечения разработчика

Базовая настройка

Для установки виджета на сайт нужно разместить вызов js-скрипта на странице, в параметрах вызова нужно указать «Клиентский API-ключ» в атрибуте data-client-id его можно взять в разделе «Интеграции» → «Клиентский API-ключ».

Описание возможностей виджета в разделе «Возможности» → «Виджет на сайт»

Настройки приложения «Бонусные карты и программа лояльности для Битрикс24» — клиентский API-ключ

Логотип компании при загрузке виджета

Можно использовать изображение с максимальными размерами 216 на 216 пикселей, в формате jpg/svg/png. Нужно указать ссылку для атрибута data-logo, на статическое изображение.

Настройка виджета для приложения «Бонусные карты и программа лояльности для Битрикс24» — логотип

Кнопка активации виджета

Можно использовать изображение с максимальными размерами 250 на 250 пикселей, в формате jpg/svg/png. Нужно указать ссылку для атрибута data-action, на статическое изображение.

Кнопка активации виджета для приложения «Бонусные карты и программа лояльности для Битрикс24»

Код для размещения на сайте

Код лучше размещать в конце страницы перед закрывающим тегом </body>.

Вызов виджета

<script 
id="loyalty-widget" 
src="https://loyalty.b24.cloud/widget/core/public/widget.js"
data-logo="https://placehold.co/216x216"
data-action="https://placehold.co/100x150"
data-client-id="3eba336f-1d02-4021-a024-c275019fe2b5"></script>

Дополнительные настройки

Открытие виджета по нажатии на кнопку или при переходе по URL

Чтобы добавить обработчик события на кнопку или ссылку, необходимо добавить атрибут: data-loyalty

<button type="button" class="button" data-loyalty>Личный кабинет</button>
<a href="#" title="Открыть личный кабинет програмы лояльности" data-loyalty>Личный кабинет</a>

По умолчанию hash установлен со значением равным: b24io. Для того чтобы установить свой hash (якорь) для URL, для открытия виджета нужно создать скрипт конфигурации:

Кастомный хеш

<script>
  window.loyaltyWidget = {
    options: {
      hash: "custom-url-hash"
    }
  };
</script>
<script 
id="loyalty-widget"
src="https://loyalty.b24.cloud/widget/core/public/widget.js"
data-action="https://placehold.co/50x50"
data-logo="https://placehold.co/216x216"
data-client-id="3eba336f-1d02-4021-a024-c275019fe2b4"></script>

Индивидуальная стилизация виджета

Для виджета доступны локальные css переменные, которые позволяют заменить цвета внутри виджета. Для этого необходимо создать тег style после инициализации js-скрипта и указать новые значения цветов в любом формате, поддерживаемом браузерами. Для переопределения доступны переменные:

<style>
      loyalty-widget {
        /* стилизация контента */
        /* цвет текста в верхней зоне: бонусная карта, профиль пользователя */
        --colorMainText: #000000;
        /* цвет заднего фона под бонусной картой и профилем пользователя */
        --colorBgUserProfile: #FAF6F1;
        /* цвет фона карты лояльности */
        --colorCardBg: #000000;
        /* цвет фона содержимого экрана: транзакции, контакт, юридические документы */
        --colorWidgetСontentBg: #ffffff;

        /* органы управления */
        /* цвет фона нижнего меню виджета */
        --colorBgMenu: #423A37;
        /* цвет иконок и текста нижнего меню виджета */
        --colorPointMenu: #ffffff;

        /* экран логина */
        /* экран логина: цвет названия компании */
        --colorCompany: #86776F;
        /* экран логина: цвет текста кнопки логина */
        --colorButtonText: #ffffff;
        /* экран логина: цвет текста кнопки логина по наведению */
        --colorButtonHoverText: #ffffff;
        /* экран логина: цвет рамки кнопки логина */
        --colorButtonBorder: #C38546;
        /* экран логина: цвет рамки кнопки по наведению */
        --colorButtonHoverBorder: #CF9D6C;
        /* экран логина: цвет фона кнопки логина */
        --colorButtonBg: #C38546;
        /* экран логина:  цвет фона кнопки по наведению*/
        --colorButtonHoverBg: #CF9D6C;
        /* Цвет ошибки на экране ввода телефона или кода */
        --colorInputErrorMessage: #ec0505;
        /* Цвет иконки вызова виджета */
        --colorWidgetActionIcon: #73fa03;
    }
</style>