Показывать по нажатию на кнопку сайта
Если у вас уже есть сайт с готовым оформлением, то интегрировать в него регистрацию от TimePad проще всего, вставив виджет регистрации в виде попапа. В большинстве случаев кнопки для регистрации тоже уже готовы и подключить к ним виджет не составит труда.
Есть два способа привязать виджет к кнопке. Оба они потребуют небольшой модификации кода вставки виджета.
Вариант с классом или id ссылки
Первым делом нужно удалить из кода вставки плейсхолдер (фрагмент <a .../a>).
Модифицируем настройки виджета, добавляя параметры:
"hidePreloading": true,
"display":"popup",
"popup": {
"triggerSelector": "какой-нибудь-класс-или-id"
}
Например:
<script defer="defer" data-timepad-widget-v2="event_register" data-timepad-customized="АЙДИ_ВАШЕЙ_КАСТОМИЗАЦИИ" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
(function(){
return {
"event": {
"id": "АЙДИ_ВАШЕГО_СОБЫТИЯ"
},
"hidePreloading": true,
"display": "popup",
"popup": {
"triggerSelector": ".twf"
}
}
})();
</script>
В коде выше меняется только event, data-timepad-customized и triggerSelector. (Здесь triggerSelector — селектор элементов на странице с виджетом, по клику на которые должен открываться попап. Это могут быть классы, id — словом, что-то, что позволит jQuery однозначно опознать ваш элемент или элементы.)
Этот код, <script>...</script>, нужно установить ровно один раз (вне зависимости от того сколько кнопок будет на странице), и лучше в <head>.
Теперь осталось только вставить саму ссылку/кнопку. Для указанного выше селектора .twf такой ссылкой может быть вот этот код:
<a href="#" class="twf">Открыть врата</a>
Готово! Виджет будет открываться по нажатию на такую ссылку. Их можно вставлять в любом количестве и даже добавлять динамически.
Если у ссылки нет класса или id
Некоторые популярные конструкторы сайтов (не будем показывать пальцем) позволяют вставлять html-коды, но не позволяют менять классы и id у своих стандартных элементов, в частности, у кнопок. Что делать в таких случаях?
Вспоминаем, что triggerSelector — это селектор для jQuery, a jQuery умеет искать не только по id и классам, а еще и по атрибутам html-тегов — и вообще много по чему. Итак, в конструкторе создаем кнопку или ссылку и в адресе ссылки прописываем, например, такой адрес:
#twf
(Как вы понимаете, за кадром конструктор сайтов создаст элемент вида <a href="#twf">Накупить билетов</a>.)
Теперь надо показать эту ссылку виджету. В коде вставки указываем:
<script defer="defer" data-timepad-widget-v2="event_register" data-timepad-customized="АЙДИ_ВАШЕЙ_КАСТОМИЗАЦИИ" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
(function(){
return {
"event": {
"id": "АЙДИ_ВАШЕГО_СОБЫТИЯ"
},
"hidePreloading": true,
"display": "popup",
"popup": {
"triggerSelector": "a[href=\"#twf\"]"
}
}
})();
</script>
Должно помочь.
Вариант с указанием id события в ссылках
Кроме того, в элементе можно указать специальный data-атрибут и указать в нём id события. Это можно использовать для того, чтобы разные ссылки открывали разные события:
<a href="#" class="twf" data-twf-target-state='{"event_id": AЙДИ_ОДНОГО_СОБЫТИЯ}'>Открыть врата</a>
<a href="#" class="twf" data-twf-target-state='{"event_id": AЙДИ_ДРУГОГО_СОБЫТИЯ}'>Открыть портал</a>
В этом случае из главного кода можно убрать кусок "event": {"id": "yyy"}, и останется просто:
<script defer="defer" data-timepad-widget-v2="event_register" data-timepad-customized="АЙДИ_ВАШЕЙ КАСТОМИЗАЦИИ" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
(function() {
return {
"hidePreloading": true,
"display": "popup",
"popup": {
"triggerSelector": ".twf"
}
}
})();
</script>
Вообще говоря, если id события указан в data-атрибуте ссылки или кнопки, виджет проигнорирует id, возвращаемый функцией в основном коде вставки. Но лучше не искушать судьбу и убрать его оттуда.
Вставка виджета стандартной кнопкой TimePad
Есть очень похожий, но на самом деле совсем другой способ вставки:
<script type="text/javascript" defer="defer" charset="UTF-8" data-twf2s-event--id="АЙДИ_ВАШЕГО_СОБЫТИЯ" data-timepad-widget-v2="event_register" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
(function () {
return {
"initialRoute": "button"
}
})();
</script>
Нет, отличие не в том, что id события передается через data-атрибут — это как раз непринципиально. Дело в том, что "initialRoute": "button" выводит на страницу нашу, таймпэдовскую кнопку, по нажатию на которую открывается попап. Ей вполне можно пользоваться, ее можно настраивать (см. свойство buttonSettings), но надо иметь в виду, что эта установка несовместима с установкой "display": "popup".
Не используйте их вместе. Если вам нужна наша кнопка, то "initialRoute": "button" — ваш друг. Если хочется привязать открытие попапа к своей — см. первые два раздела этой страницы.