Когда я впервые столкнулась с задачей добавить на свой лендинг (сделанный на Tilda) видео-приветствие из ВКонтакте и одновременно разместить рядом форму для сбора заявок, я ожидала, что всё решится парой кликов. Но на практике пришлось разобраться с нюансами: Tilda не хранит видеофайлы у себя, нужны внешние сервисы, да и форму надо оформить так, чтобы соблюсти закон о персональных данных. В этой статье поделюсь своим опытом и пошаговой инструкцией, как встроить VK-видео на сайт Tilda.
Встраиваем видео из ВКонтакте на сайт Tilda напрямую
Шаг 1. Выбираем блок для видео. В редакторе Tilda нажмите «+» и добавьте блок из категории «Видео». Я, например, использовала базовый блок Видео (VD01) – он просто выводит ролик на страницу на всю ширину блока. (Вообще, Tilda поддерживает VK Video во многих стандартных видеоблоках – от полноразмерного видео до всплывающего окна или видео с обложкой, так что можно выбрать подходящий формат.)
Шаг 2. Получаем прямую ссылку на видео VK. Tilda умеет работать с видео ВКонтакте через прямую ссылку на ролик. Где её взять: откройте нужное видео в VK и нажмите кнопку с тремя точками «⋯» (она появляется при наведении). Выберите пункт «Поделиться», затем вкладку «Экспортировать». Скопируйте адрес из поля «Прямая ссылка». Этот URL – специальная ссылка для встраивания, которую Tilda распознает.
Шаг 3. Вставляем ссылку в блок на Tilda. Вернитесь в Tilda и в настройках содержимого (Content) вашего видеоблока найдите поле для ссылки на видео. Вставьте туда скопированную прямую ссылку VK. Сохраните изменения.
Теперь на месте блока на странице будет встроен ваш ролик из ВКонтакте. При публикации сайта видео подгрузится с VK и будет воспроизводиться прямо на странице. Практически, вы уже решили задачу: видео на лендинге есть. Но мне этого было недостаточно – хотелось сразу собрать отклик от зрителей.
Совет: Если цель – именно сбор откликов, можно использовать блок Tilda из категории «Форма и видео» (например, BF402N – видео/изображение + форма в две колонки). Тогда видео (в том числе с VK) будет слева, а форма справа. Однако я пошла другим путём, чтобы обеспечить больше интерактива и юридическую чистоту обработки данных – сделала видеовиджет через сервис QForm.
Видео + форма: решение с QForm
Оказалось, что существует легкий путь: QForm, который специализируется на веб-формах и видеовиджетах. По сути, это онлайн-конструктор (no-code платформа), где можно создавать формы, квизы и видео-виджеты без программирования. Я решила попробовать его для своей задачи – добавить на сайт небольшое видео-приветствие с возможностью сразу оставить заявку. Ч
Перейдем к практике: опишу шаги, как я сделала свой видеовиджет в QForm и встроила его на сайт Tilda.
Регистрация и проект. Сначала я зарегистрировалась на сайте QForm (процесс стандартный) и создала там новое пространство-сайт для моего лендинга. Это нужно, чтобы сгенерировать код виджета именно для моего домена. В QForm в меню «Пространства и сайты» нажала «+» и добавила адрес своего сайта.
Создание видеовиджета. Затем открыла раздел «Видеовиджет» в кабинете QForm и нажала кнопку «Добавить видеовиджет». Сервис предложил загрузить видеофайл – я просто перетащила готовый ролик (MP4, ~20 Мб) в окно загрузки. Видео быстро загрузилось на платформу.
Настройка отображения. Я ввела название виджета и описание (по желанию). Важный момент – выбор вида отображения. QForm позволяет размещать видео «в теле страницы» (как обычный элемент контента) либо сделать его плавающим вертикальным или круглым. В моём случае я выбрала отображение в теле страницы, чтобы видео было достаточно крупным.
Превью и автозапуск. В настройках я оставила превью (автоматически берется первый кадр видео) и указала, чтобы виджет появлялся сразу при загрузке страницы, но без звука. Пользователь видит мое видео-приветствие, оно движется, но звук не включается, пока не кликнешь – довольно аккуратно. Эти параметры легко выставляются в настройках виджета.
Кнопка действия и форма. Далее я настроила кнопку CTA – у видеовиджета в QForm можно добавить свою кнопку поверх видео.
Получение кода виджета. После того как все настройки были готовы, я сохранила виджет. QForm сгенерировал специальный код – скрипт и контейнер DIV, который нужно вставить на сайт, чтобы виджет заработал. В QForm это находится во вкладке «Публикация» – там отдельное поле со скриптом подключения и кодом виджета. Я скопировала эти фрагменты.
Встраивание виджета в Tilda. Открыла админку своего сайта на Tilda. Чтобы добавить сторонний код, в Tilda предусмотрен блок «HTML-код». Я создала новый блок в разделе «Другое» – HTML и вставила туда скопированный код QForm. В моём случае код состоял из двух частей: небольшой скрипт (подключает QForm) и див-контейнер, обозначающий сам виджет на странице. Вставляем их подряд в поле HTML-кода и сохраняем. Для всплывающего виджета может потребоваться дополнительный триггер, но я выбрала формат, который сразу отображается, поэтому никакие дополнительные настройки на Tilda не понадобились – достаточно одного HTML-блока.
Проверка работы. Я опубликовала страницу и убедилась, что видеовиджет появился: в нижнем правом углу проигрывается мое видео без звука, а спустя несколько секунд возникает кнопка "Оставить заявку". При клике всплывает форма поверх сайта (это делает уже QForm). Я протестировала отправку заявки – данные успешно улетели в мой кабинет QForm, откуда я получила уведомление на email. Всё заработало именно так, как я задумала, и без какого-либо ручного кода или долгих настроек.
Закон 152-ФЗ: безопасность персональных данных с QForm
Отдельно расскажу о важном моменте – соблюдение закона 152-ФЗ при сборе заявок. В России при работе с формами обратной связи нужно получить согласие пользователя на обработку персональных данных и обеспечить хранение этих данных по всем правилам. Для меня, как для человека без юридического образования, это темный лес. К счастью, QForm закрывает и этот вопрос.
Во-первых, QForm сам соответствует требованиям 152-ФЗ. Сервис зарегистрирован в реестре операторов персональных данных Роскомнадзора, а все формы, созданные через него, изначально настроены в соответствии с законом. QForm гарантирует хранение собранных данных на серверах в России, в защищенном дата-центре (не за рубежом) и берет на себя обязательства оператора ПД. Фактически, подключаясь к QForm, вы делегируете обработку заявок этому сертифицированному сервису.
Во-вторых, в QForm реализованы инструменты для получения согласия от пользователя. В конструкторе форм можно добавить обязательную галочку (чекбокс) с текстом соглашения на обработку персональных данных. В самом QForm предусмотрены шаблоны документов: политики конфиденциальности, пользовательского соглашения и текста согласия, разработанные юристами. То есть платформа помогает не только технически собрать данные, но и оформить всё юридически грамотно. На сайте QForm я даже нашла упоминание, что сервис готовит для клиентов полный пакет документов и при необходимости сам общается с Роскомнадзором от вашего имени. Мне, как владелице небольшого сайта, это даёт огромную уверенность, что никакие штрафы мне не грозят.
Наконец, размещая форму QForm на своем сайте, вы можете быть уверены, что пользователи явно дают согласие: при нажатии кнопки отправки рядом всегда формулировка о принятии политики, а данные шифруются и передаются безопасно. На одном ресурсе я видела даже скриншот панели QForm с настройкой соглашения об обработке данных – то есть сервис уделяет этому особое внимание.
Заключение: мой опыт и рекомендации
Мой эксперимент с видео и формой на Tilda удался: комбинация VK Видео + QForm позволила мне оживить лендинг и сразу получать отклик от посетителей. Видео-приветствие от первого лица здорово увеличивает вовлечённость – люди дольше остаются на странице и больше доверяют информации. А встроенная форма QForm рядом с видео мгновенно переводит интерес в действие, будь то заявка на услугу или запрос обратной связи.
Для начинающих пользователей Tilda хочу особенно подчеркнуть: не бойтесь подключать внешние инструменты, такие как QForm. Они созданы именно чтобы упростить жизнь неспециалистам. В моём случае всё свелось к паре настроек через удобный интерфейс да копированию кода. Зато я получила функциональность, которая раньше казалась сложной: интерактивный видеовиджет с кастомным дизайном и юридически корректной формой. Без QForm мне пришлось бы либо привлекать разработчика, либо отказаться от затеи собрать заявки прямо через видео.
Теперь на своем сайте я вижу, как пользователи смотрят ролик и тут же отправляют заявки – конверсия заметно выросла. Если вы делаете лендинг на Tilda и хотите повысить его эффективность, попробуйте добавить видео с личным обращением и форму для мгновенного отклика. А сервис QForm вам в этом поможет, как помог мне – профессионально, адаптивно и без лишнего кода. Желаю удачи в ваших проектах!