Установка виджета

Для установки виджета нужна возможность встраивать JavaScript на ваш сайт. При этом неважно, написан ли сайт самостоятельно или создан через конструктор (например, Tilda, Wordpress или Drupal).

Примечание

Чтобы обеспечить безопасность платежей, виджет работает по протоколу HTTPS. Вы можете установить виджет и на сайт, который работает без HTTPS — в таком случае виджет будет открываться в отдельном окне. Но мы рекомендуем использовать HTTPS, чтобы обезопасить данные пользователей. О том, как перейти на HTTPS, читайте в разделе Инструкция по переходу на HTTPS Помощи Яндекс Вебмастера.

Чтобы установить виджет, добавьте на сайт код, который вам прислал менеджер. Код виджета разделен на три части:

  • Скрипт подключения API — указывается один раз для страницы, содержит клиентский ключ (clid), который вам выдаст менеджер после заключения договора:

    <script>
    /* Настройка */
    var dealerName = 'YandexTicketsDealer';
    var dealer = window[dealerName] = window[dealerName] || [];
    
    dealer.push(['setDefaultClientKey', '<clid>']);
    
    /* Загрузка */
    (function () {
    var rnd = '?' + new Date().getTime() * Math.random();
    var script = document.createElement('script');
    var target = document.getElementsByTagName('script')[0];
    script.async = true;
    script.src = 'https://widget.afisha.yandex.ru/dealer/dealer.js' + rnd;
    target.parentNode.insertBefore(script, target);
    })();
    </script>
    
  • Содержимое виджета — содержит уникальный код сеанса на Яндекс Афише
    (sessionid):

    <y:ticket data-session-id="<sessionid>" data-template="yandex-button"></y:ticket>
    
  • Внешний вид кнопки покупки:

    <script id="yandex-button" type="text/html">
    <b style="color:#333 !important; font-size:15px !important; font-family:Arial, Helvetica Neue, Helvetica, sans-serif !important; font-weight:normal !important; line-height:36px !important; text-decoration:none !important; white-space:nowrap !important; display:inline-block !important; vertical-align:middle; background:#ffde41 !important; border-radius:2px !important; padding:0 16px !important; cursor:pointer; margin:0">Купить билет</b>
    </script>
    

    Примечание

    Стиль кнопки можно менять под дизайн вашего сайта:

    <script id="yandex-button" type="text/html">
    <b style="color:#333 !important; font-size:15px !important; font-family:Arial, Helvetica Neue, Helvetica, sans-serif !important; font-weight:normal !important; line-height:36px !important; text-decoration:none !important; white-space:nowrap !important; display:inline-block !important; vertical-align:middle; background:#ffde41 !important; border-radius:2px !important; padding:0 16px !important; cursor:pointer; margin:0">Купить билет</b>
    </script>