Коды встраивания, созданные в вашей учётной записи Entase, добавляют на страницу готовый виджет события. Они предназначены для копирования и вставки без необходимости в разработке — информацию о том, как получить такой код, см. в статье Встраивание событий на ваш сайт.
На этой странице описаны параметры, которые можно добавить в этот фрагмент кода, а также настройка открываемой им формы оформления заказа.
Виджет сам загружает JavaScript-клиент, поэтому не нужно добавлять client.js рядом с ним. Ему также не нужен открытый ключ: виджет обслуживается Entase, поэтому форма оформления заказа авторизуется через виджет, а не через ключ на вашей странице.
Настройка
Каждый виджет настраивается с помощью объекта параметров:
<div id="entase_OBJ_CODE"></div>
<script>
window.entase = window.entase || { o: [] };
window.entase.o.push({
obj: 'OBJ_CODE',
theme: 'dark',
ext: true
});
</script>
<script src="https://js.entase.com/embed.js" async></script>obj связывает конфигурацию с её контейнером: виджет отображается в элементе, идентификатор которого состоит из entase_ и того же кода. Если этот элемент отсутствует, виджет выводит предупреждение и ничего не отображает.
Чтобы разместить на странице несколько виджетов, добавьте по одной записи для каждого из них.
| Название | Тип | По умолчанию | Описание |
|---|---|---|---|
obj | строка | — | Код объекта из вашего фрагмента встраивания. Обязательный параметр. |
width | строка | 'auto' | Ширина контейнера в виде значения CSS. 'auto' означает полную ширину. |
height | строка | 'auto' | Высота контейнера в виде значения CSS. При 'auto' начальная высота составляет 200px, а виджет изменяет свой размер в соответствии с содержимым. |
theme | строка | 'light' | 'light' или 'dark'. |
locale | строка | 'auto' | Язык виджета. 'auto' считывает атрибут lang вашего элемента <html>. |
ext | логическое значение | false | Расширенная компоновка — добавляет название события и постер над датами. |
attribution | логическое значение | true | Отображает строку с указанием Entase. Установите false, чтобы скрыть её. |
client | объект | {} | Параметры, передаваемые JavaScript-клиенту, который открывает форму оформления заказа. |
Независимо от значения width контейнеру задаётся минимальная ширина 200px, ниже которой виджет не может корректно скомпоноваться.
Настройка формы оформления заказа
client принимает те же параметры, что и конструктор клиента, поэтому форму оформления заказа, открываемую из виджета, можно стилизовать и задавать её размер так же, как для открываемой вами напрямую:
window.entase.o.push({
obj: 'OBJ_CODE',
client: {
checkoutMode: 'pane',
pane: { width: '60vw' },
backdrop: true,
backdropColor: '#101014'
}
});Полный список см. в разделе Параметры конструктора.
Есть два нюанса. tprm задаётся самим виджетом на основе URL страницы (см. ниже), поэтому переданное здесь значение будет заменено. Кроме того, если на странице несколько виджетов, они используют один экземпляр клиента — действуют параметры client последнего инициализированного виджета, поэтому для всех виджетов на одной странице они должны быть одинаковыми.
Автоматическая передача параметров кампании
В отличие от автономного клиента, виджет считывает строку запроса вашей страницы и передаёт известные параметры кампании как виджету, так и форме оформления заказа:
sgm, utm_source, utm_medium, utm_campaign, utm_term, utm_content, utm_id, utm_source_platform, utm_creative_format, fbclid
Если посетитель переходит на yoursite.com/concert?utm_source=facebook&sgm=SOCIAL, эта атрибуция будет сохранена для любого созданного в результате заказа без дополнительной настройки. Параметры вне этого списка игнорируются — чтобы передавать собственные параметры, открывайте форму оформления заказа напрямую с помощью клиента и сами задавайте tprm. См. Отслеживание и согласие.