Интеграция виджета на сайт

В этом разделе мы рассмотрим:

  • Как использовать кнопку с модальным окном;
  • Как интегрировать кнопку-ссылку на ваш сайт;
  • Как редактировать оттенки кнопки и активных элементов.

Как использовать кнопку с модальным окном

Этот вариант удобно использовать на своём собственном сайте, который позволяет свободно внедрять любой HTML-код там где вам нужно. Если вы работаете с сайтом, созданном на конструкторе, то удобнее работать с кнопкой-ссылкой (следующий параграф). Откройте раздел «Мероприятия», выберите мероприятие, а затем перейдите в подраздел «HTML-коды». Скопируйте строку из поля «Кнопка с модальным окном» и добавьте в код страницы сайта.

Как интегрировать кнопку-ссылку на сайт

Этот вариант наиболее удобен, если вы пользуетесь сервисами создания сайтов (Tilda, Wix, uKit, uCoz и другими), где не всегда есть возможность управлять полностью кодом страницы. В этом случае воспользуйтесь ссылкой для кнопки, которая находится в подразделе HTML-коды в поле «Ссылка кнопки для конструктора сайта». Однако, этот способ так же сработает на сайте, который запрограммирован не через сервисы-конструкторы, а вручную. Вы прописываете в кнопку указанную ссылку:

И добавляете в любое место страницы код библиотеки сервиса:
<script type="text/javascript" src="https://qtickets.ru/js/openapi"></script>

Далее для вашего удобства мы приводим ссылки на базы знаний нескольких распространённых сервисов создания сайта. Порядок действий всегда одинаковый:

1) Добавляем библиотеку (выше код в серой строке) на страницу или множество страниц;
2) Установливаем ссылку (или якорь) на кнопку или любой другой объект, который будет выполнять роль кнопки. Это может быть ссылка (a), кнопка (button), слой (div), изображение (img) и прочее.

Tilda

1) Добавляем библиотеку с помощью этой инструкции;
2) Добавляем ссылку с помощью этой инструкции.

Wix

1) Добавляем библиотеку с помощью этой инструкции;
2) Добавляем якорь с помощью этой инструкции.

uKit

1) Добавляем библиотеку с помощью этой инструкции;
2) Добавляем ссылку с помощью этой инструкции.

uCoz

Немного сложнее.

1) Добавляем библиотеку. Перейти в «Панель управления — Главная — Дизайн — Быстрая замена участков шаблонов». Тип замены = многострочный.

Что заменить:
<head>

на что:
<head>
<script type=»text/javascript» src=»https://qtickets.ru/js/openapi»></script>

Жмем на кнопку — Произвести замену.
Если имеются ранее подобные замены, то просто добавьте строку с библиотекой рядом с остальными.

2) Добавляем ссылку
https://www.ucoz.ru/help/start/vizualnyj-redaktor#links

Как редактировать оттенки кнопки и активных элементов

Вы можете изменять цвет кнопок и активных элементов в подразделе HTML-коды. Например, нажав на кнопку “Активные элементы”, вы увидите палитру цветов и оттенков.

Пример не стандартного оттенка активных элементов внутри окна покупки:


По такому же принципу работает изменение цвета кнопки.

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

Если у вас есть дополнительные вопросы, обращайтесь в поддержку продавцов билетов на info@qtickets.ru

 

Была ли эта статья вам полезна?

Статьи по теме