Подключение виджета к Tilda

Подключение модального окна с виджетом на страницу в Tilda

Первое что нужно для этого сделать это задать кнопке, по клику на которую будет открываться виджет, ссылку. Для этого:

1. Открываем свою страницу в конструкторе Tilda, выбираем блок, в котором располагаются кнопки для перехода к оплате, наживаем на кнопку редактировать блок.

2. Далее открывается редактор (автоматически, сам открывается), там мы выбираем элемент по клику на который пользователь переходит к оплате (кнопка). Кликаем левой кнопкой мыши по этому элементу.

3. С правой стороны открываются настройки, там в графе url добавляем ссылку кнопке для работы с виджетом.

   

   Скопируйте ссылку для кнопки:

   \#telegreen:tid={ID_КАТЕГОРИИ}&eid={ID_МЕРОПРИЯТИЯ}&sid={ID_СЕАНСА}

   Замените поля {ID_КАТЕГОРИИ}, {ID_МЕРОПРИЯТИЯ}, {ID_СЕАНСА} на ваши значения

   Подробнее о том как создавать ссылку читайте здесь

4. После того, как добавили ссылку, нажимаем кнопку сохранить(save) и выходим(close) из редактора блока обратно в конструктор.

5. После этого автоматически попадаем в конструктор и нажимаем кнопку Опубликовать.

Далее нам остается только добавить скрипт на виджет. Для этого:

1. Открываем свой сайт в конструкторе Tilda, в конце страницы нажимаем на плюсик (добавить блок) далее сбоку открывается панель в которой нажимаем на кнопку “другое”. В разделе выбираем блок T123 HTML-код.

   

2. Далее на страницу добавляется пустой блок. Наводим курсором на этот блок, появится кнопка контент. Кликаем на нее. Откроется пустое окно куда вставляем скрипт для работы с виджетом.

   

   Скопируйте скрипт ниже:

   <link type="text/css" rel="stylesheet" href="https://widget.telegreen.am/api/tickets/css/agent.css"> 
   <script src="https://widget.telegreen.am/api/tickets/js/agent:{ВАШ_ТОКЕН}.js?tid={ID_КАТЕГОРИИ}&eid={ID_МЕРОПРИЯТИЯ}&sid={ID_СЕАНСА}"></script>

   Замените поля {ВАШ ТОКЕН}, {ID_КАТЕГОРИИ}, {ID_МЕРОПРИЯТИЯ}, {ID_СЕАНСА} на ваши значения

   Нажимаем кнопку сохранить и закрыть.

   Подробнее о том как создавать ссылку и получить значение полей читайте здесь

3. После того как блок сохранили, вверху редактора нажимаем кнопку опубликовать и скрипт начнет работать.

   

На этом все, по клику на кнопку должен открываться виджет

Добавлению виджета в пустой блок на страницу Tilda.

Первое что нужно для этого сделать это задать кнопке, по клику на которую будет открываться виджет, ссылку. Для этого:

1. Открываем свою страницу в конструкторе Tilda, выбираем блок, в котором располагаются кнопки для перехода к оплате, наживаем на кнопку редактировать блок.

2. Далее открывается редактор (автоматически, сам открывается), там мы выбираем элемент по клику на который пользователь переходит к оплате (кнопка). Кликаем левой кнопкой мыши по этому элементу.

3. С правой стороны открываются настройки, там в графе url добавляем ссылку кнопке для работы с виджетом.

   

   Скопируйте ссылку для кнопки:

   #telegreen:tid={ID_КАТЕГОРИИ}&eid={ID_МЕРОПРИЯТИЯ}&sid={ID_СЕАНСА}

   Замените поля {ID_КАТЕГОРИИ}, {ID_МЕРОПРИЯТИЯ}, {ID_СЕАНСА} на ваши значения

   Подробнее о том как создавать ссылку читайте здесь

4. После того, как добавили ссылку, нажимаем кнопку сохранить(save) и выходим(close) из редактора блока обратно в конструктор.

5. После этого автоматически попадаем в конструктор и нажимаем кнопку Опубликовать.

Затем нужно добавить пустой блок на свою страницу в том месте где вы хотите чтобы открывался виджет. Для этого:

1. Открываем свою страницу в конструкторе Tilda, выбираем место для блока, нажимаем на плюсик (добавить блок), далее в боковой панели в самом низу выбираем нулевой блок

2. После того как блок добавился нужно задать ему класс. Для этого наводим курсором на этот блок, появятся две кнопки (настройки и редактировать). Нажимаем на кнопку настройки, откроется боковая панель, в поле css block class name прописываем класс uc-div-tg, затем нажимаем кнопку сохранить и закрыть.

3. Затем опять наводим курсором на этот блок и нажимаем на кнопку редактировать (откроется редактор). В редакторе кликаем по всем элементам в блоке и наживаем кнопку удалить, чтобы блок остался пустой. Чтобы в боковой панели во вкладке LAYERS было пусто и нажимаем кнопку save, а затем close. Автоматически выходите из редактора блока и нажимаете кнопку опубликовать (чтобы блок появился на вашей странице).

Далее остается только подключить скрипт для того чтобы виджет начал работать на вашей странице. Для этого:

1. Открываем свой сайт в конструкторе Tilda, в конце страницы нажимаем на плюсик (добавить блок) далее сбоку открывается панель в которой нажимаем на кнопку “другое”. В разделе выбираем блок T123 HTML-код.

   

2. Далее на страницу добавляется пустой блок. Наводим курсором на этот блок, появится кнопка контент. Кликаем на нее. Откроется пустое окно куда вставляем скрипт для работы с виджетом.

   

   Скопируйте скрипт ниже:

   <link type="text/css" rel="stylesheet" href="https://widget.telegreen.am/api/tickets/css/agent.css"> 
   <script src="https://widget.telegreen.am/api/tickets/js/agent:{ВАШ_ТОКЕН}.js?tid={ID_КАТЕГОРИИ}&eid={ID_МЕРОПРИЯТИЯ}&sid={ID_СЕАНСА}"></script>

   Замените поля {ВАШ ТОКЕН}, {ID_КАТЕГОРИИ}, {ID_МЕРОПРИЯТИЯ}, {ID_СЕАНСА} на ваши значения

   Нажимаем кнопку сохранить и закрыть.

   Подробнее о том как создавать ссылку и получить значение полей читайте здесь

3. После того как блок сохранили, вверху редактора нажимаем кнопку опубликовать и скрипт начнет работать.

   

   На этом все, по клику на кнопку должен открываться виджет в вашем блоке