---
layout:
  width: default
  title:
    visible: true
  description:
    visible: false
  tableOfContents:
    visible: true
  outline:
    visible: true
  pagination:
    visible: true
  metadata:
    visible: true
  tags:
    visible: true
  actions:
    visible: true
---

# Cоздание и настройка виджета

1. После того как вы перешли в **Готовые решения** со [страницы управления сервисом](https://direct.i-dgtl.ru/phone-verification/widget), нажмите кнопку **Создать**. Откроется форма создания нового виджета.

<figure><img src="/.gitbook/assets/image (291).png" alt=""><figcaption></figcaption></figure>

::::::{tip}
К созданию виджета можно также перейти из бокового меню. Для этого откройте \
**Решения** -> **Виджет верификации телефона** -> **Создать.**
::::::

<figure><img src="/.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>

2. В поле **Название виджета** введите желаемое название виджета. Если вы создаете виджет для сайта на Tilda, то нажмите на соответствующий тумблер под полем **Название виджета**.

<figure><img src="/.gitbook/assets/image (117).png" alt=""><figcaption></figcaption></figure>

3. В разделе **Подключение каналов** укажите количество цифр в составе проверочного кода и задайте настройки нужных каналов для отправки кода. Для этого перейдите на вкладку каждого канала, который хотите использовать в виджете, активируйте переключатель **Активность** и задайте необходимые настройки. <br>

<figure><img src="/.gitbook/assets/image (5).png" alt=""><figcaption></figcaption></figure>

Ниже приведены инструкции, как подключить отправку кодов через каждый из каналов. &#x20;

::::{tab-set}

:::{tab-item} Код в звонке

Выберите, как именно пользователь будет получать проверочный код: голосом робота или через код в последних цифрах номера телефона. Далее выберите текст сообщения в шаблоне из выпадающего списка и введите название вашей компании в поле **Подстановка {brand}**.\
\
Для всех каналов, кроме VK и WABA (официальный инструмент WhatsApp), доступен одинаковый список шаблонов.

***

<figure><img src="/.gitbook/assets/image (22).png" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} Telegram

Для канала **Telegram** нужно [подключить бота](../../../../kanaly-otpravki/messendzhery-i-soc.-seti/telegram/bot-1.0-sozdaite-novyi-kanal-obsheniya-s-klientami-v-telegram.md). Через него пользователи будут получать коды для авторизации. Если бот уже добавлен, выберите его в списке напротив строки **Бот 1.0**, затем выберите текст сообщения в шаблоне из выпадающего списка и укажите название компании в поле **Подстановка {brand}**.

***

<figure><img src="/.gitbook/assets/image (14).png" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} Telegram Gateway

При выборе Telegram Gateway пользователи будут получать проверочный код в официальном канале Telegram. Подробнее о канале вы можете узнать в [нашем материале](cozdanie-i-nastroika-vidzheta.md#telegram-gateway).&#x20;

<figure><img src="/.gitbook/assets/image (7).png" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} VK

::::::{tip}
В связи со скорым запуском мессенджера МАХ, новые каналы VK/OK не подключаются в i-digital direct. Следите за изменениями в[ нашем Telegram-канале](https://t.me/idigital_space).
::::::

Для отправки проверочных кодов через группу **VK** нужно [подключить соответствующий канал](https://faq.docs.direct.i-dgtl.ru/kanaly-otpravki/messendzhery-i-soc.-seti/vk-ok#podklyuchenie-kanala). Если канал **VK** не подключен, то рядом с его названием будет отображаться уведомление. Для подключения канала пройдите по ссылке **Подключить**. Укажите адрес вашей группы **VK** и выберите текст первого шаблона. В поле **Подстановка** укажите название компании. Оно будет отображаться в тексте сообщения. Нажмите **Отправить**. После того, как мы одобрим заявку, группа появится в списке.&#x20;

***

<figure><img src="/.gitbook/assets/howtosendvksample3.gif" alt=""><figcaption><p>Отправка заявки на подключение группы VK</p></figcaption></figure>

Чтобы добавить еще один шаблон:\
1\. Нажмите на поле рядом со строкой **Текст сообщения** ➔ **Добавить шаблон**; \
2\. Выберите шаблон из списка, укажите название компании и нажмите **Добавить**. \
Мы получим заявку и добавим шаблон в течение трех дней. Далее его можно будет выбрать в поле **Текст сообщения**. &#x20;

<figure><img src="/.gitbook/assets/howtosendvksample.gif" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} WhatsApp

Выберите, по какому каналу вы хотите отправлять коды клиентам: через [WABA ](../../../../kanaly-otpravki/messendzhery-i-soc.-seti/whatsapp/)или [Weasy](../../../../kanaly-otpravki/messendzhery-i-soc.-seti/weasy/). Для работы WABA необходимо [зарегистрировать имя отправителя WhatsApp](https://i-dgtl.ru/wa-registration-2/?_gl=1*mm02by*_ga*MTU2OTIwNjkyMy4xNzMxOTE4MDAy*_ga_7Z0HVW4F3W*MTczNDUwNzU0Ny4xMy4xLjE3MzQ1MzQ1NDMuNTIuMC4w). Если имя зарегистрированно, выберите его в строке **Имя отправителя WhatsApp.** Далее нужно выбрать шаблон сообщения. Если вы хотите добавить новый шаблон — [отправьте заявку](https://i-dgtl.ru/wa-registration-2/) и добавим его в течение трех дней.<br>

<figure><img src="/.gitbook/assets/image (21).png" alt=""><figcaption></figcaption></figure>

Для отправки кодов через канал Weasy выберите номер, к которому привязан аккаунт, выберите шаблон отправки и подставьте название компании.

<figure><img src="/.gitbook/assets/image (20).png" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} Viber

Выберите [зарегистрированное имя отправителя](https://direct.i-dgtl.ru/sender-names/viber?add=true) из выпадающего списка, шаблон сообщения и введите название компании.

<figure><img src="/.gitbook/assets/image (16).png" alt=""><figcaption></figcaption></figure>
:::


:::{tab-item} SMS

Аналогично с каналом Viber, выберите [имя отправителя](https://direct.i-dgtl.ru/sender-names/sms), шаблон сообщения и введите название компании.

<figure><img src="/.gitbook/assets/image (17).png" alt=""><figcaption></figcaption></figure>
:::

::::


::::::{tip}
Если для каналов **Viber, WhatsApp** или **SMS** не зарегистрировано имя отправителя, пройдите по ссылке **Зарегистрировать** и создайте заявку на подключение.
::::::

4. В разделе **Настройка виджета** используйте кнопку **Добавить канал**, чтобы добавить каналы, которые будут использоваться для отправки проверочного кода для первого и повторного запросов.

::::::{tip}
Вне зависимости от того, выбрали вы Telegram или Telegram Gateway, пользователь будет видеть единый способ авторизации через Telegram. Разница будет в том, что в одном случае он получит код с помощью вашего бота, а в другом — код от официального аккаунта. Поэтому выбрать Telegram и Telegram Gateway на одном шаге не получится.&#x20;
::::::

<figure><img src="/.gitbook/assets/image (119).png" alt=""><figcaption></figcaption></figure>

::::::{tip}
Таким образом вы можете вывести более дорогие каналы на второй шаг, который будет доступен пользователю в случае, если какой-либо канал первого шага не сработал.

При этом вы можете настроить только первый запрос — в таком случае при повторном запросе кода пользователю будет доступен тот же набор каналов.
::::::

5. В разделе **Безопасность** в поле **Капча** выберите тип сервиса по защите веб-сайтов (hCaptca, reCaptcha или SmartCaptcha), который виджет будет использовать, чтобы отличить реальных пользователей от Интернет-ботов. Подробную информацию об этих сервисах и создании учетных записей в них вы найдете в статье [Использование captcha](https://api.docs.direct.i-dgtl.ru/verifier/captcha-usage).

::::::{tip}
Для reCAPTCHA также требуется указать допустимый рейтинг пользователя. В случае, если reCAPTCHA сообщит для пользователя рейтинг ниже указанного, пользователь увидит ошибку 110 (см. [Расшифровка ошибок](https://api.docs.direct.i-dgtl.ru/verifier/errors_descriptions)).
::::::

6. В поле **Секретный ключ капчи** введите секретный ключ, который вы получили после создания учетной записи в hCaptca, reCaptcha или SmartCaptcha сервисе.
7. В поле **Время жизни кода** задайте период действия проверочного кода. Значение данного параметра указывается в минутах. Код, введенный пользователем после окончания заданного периода, будет недействительным.
8. В поле **Лимит на номер** введите ограничение на количество запросов для получения проверочного кода, которые могут быть отправлены с одного номера за один из следующих периодов времени:&#x20;
   * минута;
   * час;
   * сутки.
9. Ограничение по IP-адресам является необязательным, но может оказаться очень полезным, если вы знаете, что на ваш сервис возможны фрод-атаки. Если вам оно необходимо, в поле **Лимит неподтвержденных отправок с одного IP** задайте ограничение на количество запросов для получения проверочного кода, которые могут быть отправлены с одного IP-адреса за один из следующих периодов времени:
   * минута;
   * час;
   * сутки.

<figure><img src="/.gitbook/assets/direct.i_dgtl.ru_solutions_create_widget_phone_confirmation_2024_11_27_18_31_39 (2).png" alt=""><figcaption></figcaption></figure>

10. Нажмите кнопку **Создать**, чтобы сохранить изменения и создать виджет.\
    \
    Далее необходимо создать [API-ключ](generaciya-api-klyucha-dlya-raboty-vidzheta.md).