Promo Tools

Инструменты для автоматизации промо акций v1.4.0

  1. Check Grabber Widget - виджет для регистрации чеков пользователя.
  2. Account Manager Widget - виджет для аккаунта пользователя в промо акции. Личный кабинет, авторизация, регистрация, восстановление пароля.
  3. FeedBack Widget - виджет обратной связи.
  4. Winners Widget - виджет вывода победителей акции.

Вопросы и предложения можно задать тут ;)

Подключение

Вставить код перед закрывающим тегом body:

        <div id="promo-tools"></div>
        <script>
          (async(e,t,s,l)=>{async function n(){try{let e=await fetch(l+"manifest.json?t="+(+new Date())),t=await e.json();return{js:t["index.html"].file,css:t["style.css"].file}}catch(s){console.log(s)}}let a=await n();if(a){let i=e.createElement(t),c=e.createElement(s);i.src=l+a.js,i.async=!0,i.type="module",i.crossorigin=!0,c.rel="stylesheet",c.href=l+a.css,e.body.appendChild(i),e.body.appendChild(c)}})(document,"script","link","https://tools.mnbvcx.ru/");
        </script>
      

1. Check Grabber Widget

Виджет для регистрации чеков пользователя.

Инициализация

Достаточно любому тегу добавить класс "js-widget-check-grabber" и кликнуть на него, или на программном уровне вызвать метод:

        promoTools.checkGrabberWidget.show();
      

Методы

Показать/закрыть модальное окно виджета:

        promoTools.checkGrabberWidget.show();
        promoTools.checkGrabberWidget.hide();
      

Конфигурация

Настойка виджета происходит в объекте window.checkGrabberWidget.settings, все поля не обязательны.

До инициализации виджета:

        window.promoTools = window.promoTools || {};
        promoTools.configure = () => {
          promoTools.checkGrabberWidget.settings = {
            skin: 'default',
            api: '/api',
            userUuid: 123,
            events: {
              onSent: () => {
                // ...
              },
            },
          };
        };
      

Изменить настройки на лету и вызвать модальное окно:

        promoTools.checkGrabberWidget.settings = {
          skin: 'default',
          api: '/api',
          userUuid: 123,
          events: {
            onSent: () => {
              // ...
            },
          },
        };
        promoTools.checkGrabberWidget.show();
      

Настойки по дефолту:

        {
          skin: 'default',
          api: '',
          method: '/widgets/receipts',
          meta: null,
          maxInMiB: 20,
          maxFiles: 5,
          fields: {
            manual: {
              photos: {
                required: true,
              },
            },
          },
          userUuid: '',
          channel: 'widget',
          i18n: {
            qr: {
              title: 'Сканирование',
              subTitle: 'Наведите камеру на QR-код',
              btnQr: 'Сканировать QR-код чека',
              btnManual: 'Ввести данные вручную',
              btnPhotos: 'Загрузить фото чека',
              btnBackScanner: 'Назад к сканеру чеков',
              cameraError: {
                title: 'Мы не можем получить доступ к камере устройства. 
Разрешите браузеру обращаться к камере или загрузите фото чека', }, }, photos: { title: 'Загрузка фото', subTitle: 'Добавьте фото чека', btnPhotos: 'Отправить', }, manual: { title: 'Ручной ввод', subTitle: 'Введите данные с чека', btnManual: 'Отправить', hints: { check: { text: 'Где искать ФН/ФД/ФП на чеке?', image: '/res/example.png', }, }, }, success: { title: 'Спасибо за чек', subTitle: 'Ваш чек будет обрабатываться до 5-ти рабочих дней.
Узнать статус чека можно в личном кабинете.', }, pending: { title: 'Подождите!', subTitle: 'Идет отправка чека', }, fail: { title: 'Не удалось отправить чек!', }, }, events: { onShowPopup() { console.log('onShowPopup'); }, onClosePopup() { console.log('onClosePopup'); }, onSentSuccess(res) { console.log(res); }, onSentError(res) { console.log(res); }, onSent() { console.log('onSent'); }, onUseQr() { console.log('onUseQr'); }, onUseManual() { console.log('onUseManual'); }, onUsePhotos() { console.log('onUsePhotos'); }, }, };

Пример

2. Account Manager Widget

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

Инициализация

Для вызова модалки авторизации (или если юзер авторизован, будет переход по адресу https://example.com/widget-account) достаточно любому тегу добавить класс "js-widget-account-manager" и кликнуть на него, или на программном уровне вызвать метод:

        promoTools.accountManagerWidget.login();
      

Пример:

Чтобы вызвать виджет чеков с проверкой на пользователя достаточно любому тегу добавить класс "js-widget-check-grabber-is-account" и кликнуть на него, если пользователь найден, то появится вижет чеков иначе виджет авторизации

Или на программном уровне вызвать метод:

        promoTools.accountManagerWidget.showWidgetCheckGrabberIsAccount();
      

Конфигурация

Настойка виджета происходит в объекте window.accountManagerWidget.settings, все поля не обязательны.

До инициализации виджета:

        window.promoTools = window.promoTools || {};
        promoTools.configure = () => {
          promoTools.accountManagerWidget.settings = {
            skin: 'default',
            api: 'https://example.com/api',
            methods: {
              signIn: '/authenticateByEmail',
              signUp: '/registerByEmail',
              recovery: '/resendPassword',
              profile: '/getProfile',
              updateProfile: '/updateProfile',
              codes: '/getCodes',
              prizes: '/getPrizes',
              logout: '/logout',
              endPromo: '/endTime',
            },
            i18n: {
              companyName: 'Название',
            },
          };
        };
      

Настойки по дефолту:

        {
          skin: 'default',
          api: '',
          methods: {
            signIn: '',
            signUp: '',
            recovery: '',
            profile: '',
            updateProfile: '',
            codes: '',
            prizes: '',
            logout: '',
            endPromo: '',
          },
          i18n: {
            companyName: '',
            signUp: {
              rules: 'Я принимаю Правила рекламной акции
и Политику конфиденциальности', }, account: { personalData: 'Даю согласие на обработку персональных данных', }, endPromo: { title: '', text: 'Акция завершена, спасибо за участие!', btn: 'Закрыть', }, }, }

3. FeedBack Widget

(в разработке...)

4. Winners Widget

Инициализация

Для вывода победителей достаточно вставить тег в нужное место верстки:

        <div id="winners-widget"></div>
      

и настроить конфигурацию.

Конфигурация

Настойка виджета происходит в объекте window.winnersWidget.settings, все поля не обязательны.

До инициализации виджета:

        window.promoTools = window.promoTools || {};
        promoTools.configure = () => {
          promoTools.winnersWidget.settings = {
            skin: 'default',
            api: 'https://stage.maslenitsa.prostokvashino.ru/api/api',
            methods: {
              winners: '/getWinners',
            },
          };
        };
      

Настойки по дефолту:

        {
          skin: 'default',
          api: '',
          methods: {
            winners: '',
          },
          i18n: {
            noData: 'Победители ещё не опубликованы',
            notFound: 'Результаты не найдены',
          },
        }