Выдача дисконтной карты на сайте и анкетирование

Форма может работать в следующих режимах:

Выдача новой карты плюс анкетирование. Режим по умолчанию.
Выдача новой карты ИЛИ подтверждение существующей плюс анкетирование. Включается установкой параметра mode: 2 в конструкторе формы.
Только выдача карты (без анкетирования). Включается установкой параметра mode: 3.

Настройки системы (общие)

embed.secret — из настроек reCaptcha
embed.sites — сайт на котором установлена форма (разрешение CORS)
embed.workplace — код рабочего места от имени которого будут создаваться анкеты
sms.template.remote-survey — шаблон СМС сообщения Код <%- authreqCode %>.
embed.form — код формы опроса по умолчанию (только для режимов #1, 2)
embed.serie — код виртуальной серии карт по умолчанию

Пример использования на странице (режим #1)

<!DOCTYPE html>
html lang="en">
head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <script src="https://wallet.client.ru/api/embed/v1/loader.v001.js"></script>
   <style>
   #SurveyError {
       visibility: hidden;
   }
   .SurveyHasError #SurveyError {
       visibility: visible;
   }
   .SurveyCodeRequested #SurveyCaptcha {
       display: none;
   }
   .SurveyCodeRequested #SurveyButton {
       display: none;
   }
   #SurveyCode {
       visibility: hidden;
   }
   .SurveyCodeRequested #SurveyCode {
       visibility: visible;
   }
   </style>
   <div id="SurveyContainer">
       <div id="SurveyPhone">+7 <input type="tel"/></div>
       <div id="SurveyCaptcha"></div>
       <div id="SurveyButton">
               <button type="button">
                       Получить дисконтную карту
               </button>
       </div>
       <div id="SurveyCode">
               Сообщение отправлено на ваш номер, введите код из СМС<br/>
               <input type="text">
       </div>
       <div id="SurveyError"></div>
   </div>
   <script>
       new ExtrovertRemoteSurvey({
               mode: 1,
               host: 'https://wallet.client.ru',
               returnTo: 'http://www.client.ru/thanks',
               container: 'SurveyContainer',
               input: 'SurveyPhone',
               button: 'SurveyButton',
               error: 'SurveyError',
               code: 'SurveyCode',
               captcha: 'SurveyCaptcha',
               captchaParams: {
                   sitekey: "6Ldh***********************************"
               }
        });
    </script>
</body>
</html>

Пример использования на странице (только выдача карты)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="https://wallet.client.ru/api/embed/v1/loader.v001.js"></script>
    <style>
    #SurveyError {
        visibility: hidden;
    }
    #SurveyCaptcha {
        display: none;
    }
    #SurveyCode {
        visibility: hidden;
    }
    #SurveyCardInfo {
        display: none;
    }
    .SurveyHasError #SurveyError {
        visibility: visible;
    }
    .SurveyStep__send #SurveyCaptcha {
        display: block;
    }
    .SurveyStep__send #SurveyButton {
        display: block;
    }
    .SurveyStep__confirm #SurveyCode {
        visibility: visible;
    }
    .SurveyStep__card #SurveyCardInfo {
        display: block;
    }
    </style>
    <div id="SurveyContainer">
        <div id="SurveyPhone">+7 <input type="tel"/></div>
        <div id="SurveyCaptcha"></div>
        <div id="SurveyButton">
            <button type="button">
                Получить дисконтную карту
            </button>
        </div>
        <div id="SurveyCode">
            Сообщение отправлено на ваш номер, введите код из СМС<br/>
            <input type="text"/>
        </div>
        <div id="SurveyCardInfo">
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="SurveyCardInfoQr"/>
            <div>
                Карта создана. Спасибо. Можете скачать ее по
                <a href="#" id="SurveyCardInfoLink">ссылке</a>.
            </div>
        </div>
        <div id="SurveyError">
        </div>
    </div>
    <script>
        new ExtrovertRemoteSurvey({
            mode: 3,
            seriesId: 8,
            host: 'https://wallet.client.ru',
            container: 'SurveyContainer',
            input: 'SurveyPhone',
            button: 'SurveyButton',
            error: 'SurveyError',
            code: 'SurveyCode',
            captcha: 'SurveyCaptcha',
            cardInfoQr: 'SurveyCardInfoQr',
            cardInfoLink: 'SurveyCardInfoLink',
            captchaParams: {
                sitekey: '6LcU_***********************************'
            }
        });
    </script>
</body>
</html>

В примере необходимо заменить адрес wallet.clinet.ru на адрес системы.

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

Во время работы, скрипт применяет к контейнеру (настройка container) CSS классы которые могут управлять видимостью и стилем отображения частей виджета:

SurveyStep__[send|confirm|card] текущий шаг анкеты:
- ввод номера телефона
- ввод полученного SMS кода
- отображение номера выданной карты (если включен режим "только выдача карты")
SurveyHasError если нужно показать ошибку;
SurveyCodeRequested если система отправила код подтверждения на телефон клиента;

Настройка	Описание
`container`	ID контейнера в котором находится HTML код виджета.
`seriesId`	Код серии виртуальных карт для выдачи.
`surveyId`	Код формы опроса.
`allowUtm`	Разрешить изменять рабочее место анкетирования/выдачи карты через UTM метку. Форма на странице, открытая с параметром `utm_source=workplace_2`, будет создавать карты и анкеты от имени рабочего места с кодом `2`. Рабочее место с таким кодом должно существовать в системе.
`captcha`	ID HTML элемента в который будет смонтирована капча.
`input`	ID HTML элемента в котором находится `input` для ввода номера телефона.
`button`	ID HTML элемента в котором находится `button` “Получить карту”.
`error`	ID HTML элемента в который будет добавлено сообщение об ошибке.
`code`	ID HTML элемента в котором находится описание действий и input для ввода кода подтверждения.
`cardInfoQr`	ID HTML тега `img` в который будет вставлен QR код со ссылкой на скачивание карты. Для режима “Только выдача карты”.
`cardInfoLink`	ID HTML тега `a` в который будет вставлена ссылка на скачивание карты. Для режима “Только выдача карты”.
`returnTo`	Адрес, на который необходимо вернуться после завершения анкетирования.