Форма на странице

Данный раздел инструкции актуален для использования виджета с формами ввода данных, которые находятся на самой странице сайта. Если вы хотите использовать виджет для форм в pop-up блоках (например, BF502N: Popup: форма с множеством полей), перейдите в раздел "Форма в pop-up блоке"

На сайте Tilda в редакторе определите форму, к которой должен быть привязан виджет подтверждения телефона. Форма должна иметь обязательное поле ввода телефона. Позднее нам понадобится ID блока с формой – чтобы узнать его, перейдите в настройки блока:

Промотайте вниз открывшееся боковое меню и найдите Block id. Скопируйте его и сохраните отдельно для дальнейших действий.

Добавьте два блока HTML-код (T123) прямо под вашей формой ввода телефона.

В результате вы увидите подобную структуру:

После этого перейдите в редактирование первого (верхнего) блока и добавьте туда следующий код:

<script src="https://cdn.direct.i-dgtl.ru/VerifyWidget.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.direct.i-dgtl.ru/VerifyWidget.css" />

<script>
    window.VerifyWidget.tildaPrepare('FORM_ID', '#auth-widget', {
        widgetId: 'WIDGET_ID',
        captchaSiteKey: 'CAPTCHA_SITE_KEY',
        apiKey: 'API_KEY',
    	windowed: true
        }, () => {}, () => {})
</script>

Вместо следующих параметров нужно указать ваши значения:

• FORM_ID – идентификатор блока формы, в которой находится поле ввода номера телефона

• WIDGET_ID – идентификатор виджета (из личного кабинета)

• CAPTCHA_SITE_KEY – sitekey капчи

• API_KEY – API-ключ для виджета (Tilda), созданный в личном кабинете

Во втором блоке добавьте следующий код:

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

Если вы планируете вызывать виджет из нескольких форм, то для каждого вызова:

• во втором блоке вместо auth-widget должен быть прописан уникальный идентификатор (например, auth-widget-1, auth-widget-2 и т.д.)

• в первом блоке нужно прописать уникальный идентификатор из второго блока

Таким образом, для каждой формы, из которой вызывается виджет, на месте "auth-widget" в обоих HTML-блоках нужно прописывать уникальную строку.

В итоге вы получите структуру следующего вида:

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