Модальное (всплывающее) окно

В случае размещения виджета в виде модального (всплывающего) окна, необходимо вставить скрипт, который обеспечивает работу этого всплывающего окна. Ниже приведён его код.

<!-- BEGIN GIFTERY WIDGET CODE -->
<script type="text/javascript">
if (typeof document !== 'undefined') {
  (function(){
    var s = document.createElement('script');
    s.type = 'text/javascript';s.async = true;
    s.src = 'https://launcher.giftery.cards/js/index.js';
    var ss = document.getElementsByTagName('script')[0];
    ss.parentNode.insertBefore(s, ss);
  })();
}
</script>
<!-- END GIFTERY WIDGET CODE -->

Данный скрипт рекомендуется вставлять в начало страницы в тег head.

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

Пример

Открыть виджет Giftery Card

<a
  href="#"
  data-giftery-widget="23903"
>Открыть виджет Giftery Card</a>

Также помимо ссылки можно использовать кнопку с помощью тега button.

В данном примере в атрибуте data-giftery-widget указано число 23903. Это и есть ID продукта. В данном случае это идентификатор продукта Giftery Card. Если необходимо подключить виджет с помощью конфигурации, то достаточно указать её код в этом атрибуте.

В данном случае откроется виджет с конфигурацией card:

<button
  data-giftery-widget="card"
>Открыть виджет Giftery Card</button>

Если нужно указать одновременно ID продукта и его конфигурацию, можно использовать дополнительный параметр data-giftery-widget-product-id:

  <button
    data-giftery-widget="card"
    data-giftery-widget-product-id="23903"
  >Открыть виджет Giftery Card</button>

Примечание. При использовании ссылок рекомендуется указывать также аттрибут href и прописывать в него URL виджета. Это необходимо на случай, если у пользователя будет отключён JavaScript или скрипт не успеет инициализироваться. В этом случае виджет откроется в новой вкладке.

<a
  href="https://widget.giftery.cards/?productId=23903"
  target="_blank"
  data-giftery-widget="23903"
>Открыть виджет Giftery Card</a>

Дополнительные параметры

При размещении с помощью модального окна реализовано несколько параметров, позволяющих немного настроить внешний вид виджета. При этом значения параметров, указанных в кнопке или ссылке переопределяют значения, указанные в конфигурации.

Параметр	Описание
data-giftery-widget-color	Основной цвет оформления в шестнадцатеричном формате. Например, ff6400. Символ `#` можно не указывать; сокращённый формат не поддерживается.
data-giftery-widget-face	Номинал подарочного сертификата, который будет выбран по умолчанию при открытии виджета.
data-giftery-analytics-channel	Название аналитического канала на латинице. Эти данные видно в "Отчете по продажам" для поставщиков.

Плюсы

• Открывается поверх сайта, пользователь остаётся на сайте
• Виджет автоматически масштабируется под экран

Минусы

• Более сложный процесс подключения
• Необходимо понимание, куда размещаются скрипты