Показывать по нажатию на кнопку сайта

Если у вас уже есть сайт с готовым оформлением, то интегрировать в него регистрацию от 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" — ваш друг. Если хочется привязать открытие попапа к своей — см. первые два раздела этой страницы.