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

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

Если вы только осваиваете систему и продаж еще не было, начните с инструкции «Первые шаги: с чего начать продажу билетов»: виджет там последний шаг, а до него — способы оплаты, продавец, площадка со схемой зала и событие с ценами.

Что нужно сделать

1. Создать продавца с доступом к виджету.
2. Добавить способ оплаты (эквайринг) для приема платежей.
3. Получить код виджета для нужного события.
4. Вставить код на свой сайт.

Шаг 1. Создать продавца

Виджет не работает «сам по себе» — он всегда продает от имени продавца. Поэтому первым делом нужно создать продавца и выдать ему доступ к виджету.

1. В левом меню откройте раздел «Продажи» → «Продавцы» и нажмите «Добавить».
2. На вкладке «Основное» заполните «Название» — например, «Виджет на сайте».
3. Включите галочку «Доступ к виджету». Это и есть то, что разрешает продавцу продавать билеты через виджет.
4. «Статус» — «Активно».
5. Нажмите «Сохранить».

⚠️ Без продавца с включенным доступом к виджету кнопка покупки работать не будет.

Остальные поля карточки продавца для запуска виджета не нужны, но пригодятся позже: вознаграждение и сервисный сбор, реквизиты для документов, ограничение доступа к отдельным событиям. Все это разобрано в инструкции «Продавцы и доступ к событиям».

Шаг 2. Добавить способ оплаты (эквайринг)

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

1. В левом меню откройте раздел «Система» → «Способы оплаты» и нажмите «Добавить».
2. На вкладке «Основное» заполните «Название» — например, «Оплата картой».
3. В поле «Тип» выберите «Эквайринг».
4. Включите галочку «Доступно в виджете». Она появляется только для типа «Эквайринг» и определяет, что этот способ оплаты будет предложен покупателю в виджете.
5. «Статус» — «Активно».
6. Перейдите на вкладку «Эквайринг». В поле «Транспорт» выберите платежного провайдера (например, Сбербанк) и заполните параметры подключения — система покажет нужные поля (адрес шлюза, логин, пароль и так далее). Эти данные вы получаете у своего банка-эквайера.
7. Нажмите «Сохранить».

💡 Если способов оплаты с доступом к виджету не будет, покупатель не сможет завершить заказ. Бесплатные билеты (с нулевой ценой) завершаются без оплаты автоматически.

Шаг 3. Получить код виджета для события

Когда продавец и эквайринг готовы, можно получить код виджета.

1. В левом меню откройте раздел «Приложения» → «Виджет».
2. В поле «Продавец» выберите созданного на шаге 1 продавца. В списке отображаются только продавцы с доступом к виджету.
3. Чтобы виджет открывался сразу на определенном событии, заполните фильтры сверху вниз и в самом нижнем поле «Событие» выберите нужное. Остальные фильтры необязательные: если оставить поля пустыми, виджет откроется на афише со списком всех доступных событий этого продавца.
4. Под фильтрами появится ссылка на виджет — ее можно скопировать кликом, например чтобы просто отправить покупателю прямую ссылку.
5. Нажмите кнопку «Код виджета» — откроется окно с готовым кодом для вставки на сайт.

Шаг 4. Разместить виджет на своем сайте

В окне «Код виджета» показаны два фрагмента кода. Их нужно вставить в HTML вашего сайта.

4.1. Подключите скрипт виджета

Добавьте этот скрипт один раз на каждой странице, где должна быть кнопка покупки, — прямо перед закрывающим тегом </body>:

<script src="https://widget.ticketprime.ru/script-x.js"></script>

4.2. Добавьте кнопку покупки

В том месте страницы, где должна появиться кнопка, вставьте элемент с атрибутом data-tp-widget. В качестве значения используйте токен виджета из окна «Код виджета» — он уже подставлен в готовый код в админке:

<button data-tp-widget="ВАШ_ТОКЕН_ВИДЖЕТА"></button>

Скрипт автоматически превратит этот элемент в кнопку. По клику откроется виджет на выбранном событии — покупатель выберет места и оплатит билеты, не покидая ваш сайт.

💡 Токен уже «привязан» к выбранному событию. Не нужно вручную править ссылки — просто скопируйте готовый код из окна «Код виджета». Для другого события сформируйте новый код.

Настройка внешнего вида кнопки

Кнопку можно настроить дополнительными атрибутами:

• data-tp-widget — токен виджета, полученный в админке. Обязательный.
• data-tp-text — текст кнопки. По умолчанию: «Купить билеты».
• data-tp-color — цвет фона кнопки, любой CSS-цвет. По умолчанию: #e5383b.
• data-tp-text-color — цвет текста кнопки. По умолчанию: #ffffff.
• data-tp-style — произвольные CSS-стили для кнопки.

Пример кнопки со своим текстом и цветом:

<button
data-tp-widget="ВАШ_ТОКЕН_ВИДЖЕТА"
data-tp-text="Билеты на концерт"
data-tp-color="#6c5ce7"
data-tp-text-color="#ffffff"
></button>

Виджет на любом элементе

Виджет работает не только на кнопке, но и на любом HTML-элементе — ссылке <a>, блоке <div>, тексте <span> и так далее. Достаточно добавить атрибут data-tp-widget:

<a href="#"
data-tp-widget="ВАШ_ТОКЕН_ВИДЖЕТА"
data-tp-text="Открыть продажу билетов"
data-tp-color="#0984e3"
></a>

Открытие виджета из своего кода

Если нужно открыть виджет по событию в вашем собственном скрипте — например, из своей кнопки или меню, — используйте вызов TicketPrime.open(token):

<button onclick="TicketPrime.open('ВАШ_ТОКЕН_ВИДЖЕТА')">
Открыть через JS API
</button>

Проверка

После размещения кода откройте страницу своего сайта:

1. На странице появилась кнопка покупки билетов.
2. По клику открывается виджет с выбором мест на нужном событии.
3. На этапе оплаты доступен настроенный способ оплаты (эквайринг).

Если кнопка не появляется — убедитесь, что подключен скрипт script-x.js, а в атрибуте data-tp-widget указан корректный токен из окна «Код виджета».

Частые вопросы

Кнопка не появляется на сайте.

Проверьте, что тег <script src="https://widget.ticketprime.ru/script-x.js"></script> добавлен на страницу и что у элемента есть атрибут data-tp-widget с токеном.

В списке продавцов на странице «Виджет» пусто.

Значит, нет ни одного продавца с включенной галочкой «Доступ к виджету». Вернитесь к шагу 1 и включите ее.

Продавец выбирается, но нужного события в виджете нет.

Событие может быть закрыто для этого продавца — настройкой самого события или областью доступа в его карточке. Разбор — в инструкции «Продавцы и доступ к событиям».

На этапе оплаты нет способов оплаты.

Добавьте способ оплаты типа «Эквайринг» с включенным «Доступно в виджете» — шаг 2.

Нужно продавать на другое событие.

Повторите шаг 3: выберите другое событие и получите новый код виджета.