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

image

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

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

Внимание! Не удаляйте никакие параметры из этой строки, иначе она не будет скрыта после загрузки виджета.

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

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

Параметр Описание
2.1. Тип файла Стандартный параметр для любого загружаемого JavaScript. Не меняйте этот параметр.
2.2. Флаг асинхронной загрузки Этот параметр позволяет виджету загружаться асинхронно, то есть не блокировать загрузку других ресуров, которые использует ваш сайт.
2.3. Адрес файла По этому адресу расположен виджет.
2.4. Кодировка Эта настройка позволяет без проблем устанавливать виджет на страницу с любой кодировкой. Не меняйте этот параметр.

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-атрибутах, так и в возвращаемом значении, приоритет будет отдан именно возвращаемому значению.

Внимание! Не опускайте кавычки у названий параметров — это допускает JavaScript, но не JSON. По той же причине не используйте одинарные кавычки вместо двойных.