Как устроен код вставки

1. Ссылка на регистрацию

Если по каким-то причинам виджет не смог загрузиться (например, оказался поврежден код вставки), у посетителей вашего сайта останется возможность перейти по ссылке и заказать билеты на странице вашей организации на сайте TimePad. После успешной загрузки виджета эта строка будет автоматически скрыта и заменена на виджет.

2. Настройки загрузки виджета

Здесь перечислены стандартные параметры, которые управляют загрузкой JavaScript файлов. Изменять эти параметры не нужно.

3. Параметры инициализации виджета

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

3.1. ID кастомизации

В рамках одной организации и даже одного события вы можете использовать виджеты с разными стилями оформления и даже разными поведениями. ID кастомизации нужен для того, чтобы сказать виджету, какое оформление и поведение использовать. С помощью этого параметра сотрудники Таймпада могут изменять дизайн и поведение конкретного виджета без необходимости изменять код вставки и каким-либо образом модифицировать ваш сайт. Пожалуйста, не удаляйте и не изменяйте этот параметр, даже если используете только один стандартный дизайн виджета.

3.2. Тип виджета

Таймпад предоставляет возможность установить много разных виджетов: виджет регистрации на событие, виджет списка событий, виджет подписки на рассылку и так далее. Параметр data-timepad-widget-v2 указывает, какой виджет нужно загрузить, а v2 указывает на версию загрузчика. Это нужно на случай, если на странице одновременно окажутся загрузчики разных версий.

4. Альтернативный способ конфигурации виджета

Есть два способа передать параметры в виджет. Набор и название параметров в основном одинаковы (их можно посмотреть в разделе «Настройки виджета регистрации»), отличается лишь способ их записи.

Один из них - это передача значений через data-атрибуты тэга <script>. Все параметры должны начинаться с префикса data-twf2s-, дальше идет название параметра и его значение. Например, чтобы установить параметр locale в значение en нужно добавить data-атрибут data-twf2s-locale="en".

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

Если нужно указать вложенный параметр, то каждый уровень иерархии нужно отделять двумя знаками минус --. Например, если вам нужно передать параметр, который в настройках выглядит как

event:
  id: АЙДИ ВАШЕГО СОБЫТИЯ

записать его нужно как data-twf2s-event--id="АЙДИ_ВАШЕГО_СОБЫТИЯ"

5. Основной способ конфигурации виджета

Более удобный вариант передачи параметров, особенно в большом количестве — это запись их в тело виджета в виде возвращаемого значения анонимной функции. Они записываются в формате JSON, имеют структуру описанную в разделе «Настройки виджета регистрации») и оборачиваются в конструкцию вида:

(function(){
  return {
    // объект с перечислением настроек
  }
})();

Например, чтобы передать параметры из примера выше, нужно записать такую конструкцию:

<script ... src="https://timepad.ru/js/tpwf/loader/min/loader.js" ... >
  (function() {
    return {
      "locale": "en",
      "event": {
        "id": "АЙДИ_ВАШЕГО_СОБЫТИЯ"
      }
    }
  })();
</script>

Имейте в виду, что если одни и те же параметры прописаны как в data-атрибутах, так и в возвращаемом значении, приоритет будет отдан именно возвращаемому значению.