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

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

<!-- BEGIN GIFTERY WIDGET CODE -->
<script type="text/javascript">
  (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.

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

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

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

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

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

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

Примечание. При использовании ссылок рекомендуется указывать также аттрибут 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`	Номинал подарочного сертификата, который будет выбран по умолчанию при открытии виджета.

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

Дополнительно

Примеры виджетов партнёров

Плюсы

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

Минусы

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