Установка квиза на странице Tilda
Для того чтобы добавить кнопку квиза на страницу Tilda, необходимо чтобы в Tilda использовался тариф, позволяющий вставку стороннего кода, то есть как минимум Tilda Personal.
Добавление кнопки квиза на страницу в Tilda происходит в три этапа:
1. Добавить код в head секцию страницы
2. Добавить код кнопки в блок на странице
3. Опубликовать изменения
Соответственно, нам необходимо получить код для секции head и код кнопки квиза.
Получаем код для секции head и код кнопки квиза
Код для секции head и код для кнопки квиза можно найти на странице редактирования квиза, в разделе Установка квиза. Код для секции находится в текстовом поле, его будет необходимо скопировать и вставить на страницу Tilda.
Код кнопки квиза находится на форме, открывающейся по кнопке «Открыть редактор кнопки». Его также надо будет скопировать и вставить на страницу Tilda.
Добавляем код в секцию head
На сервисе Tilda открываем страницу, на которой хотим добавить кнопку квиза.В правом верхнем углу выбираем пункт Ещё->Настройки страницы
В открывшейся форме выбираем пункт Дополнительно, скроллим вниз до пункта «HTML-код для вставки внутрь head», выбираем Редактировать код
На открывшейся странице в текстовое поле копируем код для вставки в секцию head со страницы Установка квиза, жмём Сохранить, а затем “Вернуться к списку страниц сайта”.
На этом этапе мы успешно справились с первой частью задачи.
Добавляем кнопку квиза на страницу
Открыть страницу на которой мы только что добавляли код. В месте где мы хотим добавить кнопку нажимаем на добавить блок — чёрный круг с знаком «+» по центра страницы. В открывшемся боковом меню выбираем пункт Другое, расположенный в самом низу списка, а затем пункт HTML-код
В появившемся блоке нажимаем на кнопку Контент. На открывшейся форме в текстовое поле «HTML КОД / КОД ВИДЖЕТА» вставляем код кнопки со страницы Установка квиза.
Нажимаем Сохранить и выйти. Второй этап успешно выполнен.
Публикация изменений
Теперь осталось опубликовать изменения, чтобы они вступили в силу: жмём Опубликовать в правом верхнем углу страницы. После этого, если мы зайдём на страницу, то сможем увидеть кнопку, нажав на которую откроется квиз.
Если у вас есть предложения по улучшению функционала, пишите нам в чат поддержки. Вместе мы сделаем лучший конструктор квиз-опросов.
Как создать квиз (quiz) или опрос с вариантами ответа?
В данный момент мы работаем над расширением этого функционала. Возможно, вам могут подойти следующие блоки:
Форма ⟶ BF913 ⟶ Опрос или голосование
Форма ⟶ BF918 ⟶ Тест (карточки с вариантами ответа, результаты прохождения)
Еще вы можете добавить сторонний квиз или опрос с помощью вставки html-кода.
Похожие вопросы
- Как убрать «Made on Tilda» внизу страницы (в подвале сайта)?
- Как сделать кликабельным номер телефона?
- Как загрузить файл на свой сайт?
- Как передать сайт или страницу на другой аккаунт?
- Почему не видны изменения после публикации, а в предпросмотре есть?
Тест с карточками
Посмотрите видеоурок о том, как добавить квиз на страницу или прочитайте подробную инструкцию ниже.
Блок BF918 (категория «Форма и кнопка») добавляет интерактивный тест в форме карточек с вопросами. Пройдя тест, пользователь увидит результат и послание, которое вы подготовите. Этот инструмент позволит вовлечь посетителей вашего сайта и дать им полезную информацию в игровой форме.
Тест состоит из трех частей:
1. Заголовок, описание и кнопка с призывом пройти тест.
2. Карточки с вопросами, которые последовательно сменяют друг друга после каждого ответа. Карточек может быть неограниченное количество.
3. Карточка с результатом и кнопкой возврата к началу.
Как хорошо вы знаете Тильду?
Проверьте, насколько хорошо вы разбирайтесь в возможностях Тильды и настройках блоков.
| Начать тест |
C чего начать создание сайта? ��
Обложка — важный элемент сайта. Но создание сайта начинается с анализа конкурентов и исследования аудитории.
С анализа конкурентов и исследования аудитории
С прототипа
Прототип сайта рисуется после изучения аудитории, анализа конкурентов и составления структуры
| Следующий вопрос |
В каком году появилась Тильда? ��
| Следующий вопрос |
Что такое Zero Block? ⚡️
Профессиональный редактор для веб-дизайна внутри Тильды
Точно! В Zero Block можно нарисовать свой дизайн сайта.
Пустая страничка в библиотеке шаблонов
Неверно. Пустая страничка в библиотеке шаблонов называется Blank page.
Блок без контента
Неверно. Блок без контента — это блок DV05, «Дополнительный отступ».
| Следующий вопрос |
Как отслеживать статистику сайта, созданного на Тильде? ��
В личном кабинете
Да, но для более подробной аналитики можно подключить Яндекс.Метрику или Google Analytics.
Подключить Яндекс.Метрику или Google Analytics
Да, но также вы можете смотреть встроенную статистику прямо в Тильде.
Верны оба варианта
Верно! Вы можете следить за показателями в Google, Яндекс и личном кабинете Тильды одновременно.
| Следующий вопрос |
Как добавить дополнительные функции с помощью вставки HTML? ��
С помощью блока T123, HTML код
Вставка HTML кода также есть внутри Zero Block.
С помощью Zero Block
Для вставки HTML кода также можно использовать блок T123.
Верны оба варианта
Верно! Вставить HTML код можно используя блок T123 и внутри Zero Block.
| Следующий вопрос |
Самый первый эффект анимации, который появился на Тильде ✨
Эффект печатной машинки
Неверно, первым появился hover эффект на кнопках и ссылках в меню.
Анимация появления текстов
Неверно, первым появился hover эффект на кнопках и ссылках в меню.
Hover эффект на кнопках и ссылках в меню
| Следующий вопрос |
Оптимальный размер картинки для загрузки на Тильду? ��
Это самый большой размер для полноэкранного изображения.
Такой формат подойдет для большинства изображений, кроме полноэкранных.
Правильный размер изображений поможет вам оптимизировать работу сайта.
Под размер контейнера, но не больше 1680 px по большей стороне
| Следующий вопрос |
Можно ли редактировать фотографии прямо в Тильде?
Можно. В настройках блока с фото есть встроенный редактор для изображений.
| Следующий вопрос |
Какие шрифты можно подключить к сайту на Тильде?
Те, которые есть в библиотеке Тильды
Не только. Вы можете использовать библиотеку Тильды, сторонние сервисы или загрузить свой файл шрифта.
Только Google Fonts
Не только. Вы также можете загрузить свой файл шрифта, воспользоваться бесплатной библиотекой шрифтов на Тильде или подключить Typekit.
Верно! Вы можете воспользоваться бесплатной библиотекой шрифтов на Тильде, загрузить свой файл шрифта, подключить Typekit или Google Fonts.
| Следующий вопрос |
Как выглядит экспорт исходного кода на Тильде?
Статичный HTML плюс CSS, JS и картинки
Верно! Вы сможете скачать исходный код проекта в виде zip-архива.
Экспорт кода в виде текстового файла
Неверно. При экспорте вы получаете статичный HTML, CSS, JS и картинки.
Ни один из вариантов
Неверно. При экспорте вы получаете zip-архив со статичным HTML, CSS, JS и картинками.
| Следующий вопрос |
Что главное для создания эффективного сайта? ��
SEO оптимизация
Неверно. Чтобы оптимизировать сайт для поисковиков, прежде всего нужен хороший контент.
Нестандартный дизайн сайта
Неверно. Неплохо, когда сайт выглядит необычно, но этого недостаточно.
Качественный контент
Точно! Сайт начинается с контента.
| Следующий вопрос |
Tilda Junior
Скорее всего вы недавно познакомились с Тильдой. Об основных функциях Тильды расскажет Справочный центр, а образовательный журнал Tilda Education поможет прокачать знания в интернет-маркетинге и веб-дизайне.
| Попробовать еще раз |
Tilda Senior
Вы неплохо разбираетесь в Тильде! Чтобы стать экспертом, поизучайте Справочный центр, а образовательный журнал Tilda Education поможет прокачать знания в интернет-маркетинге и веб-дизайне.
| Попробовать еще раз |
Tilda Expert
Здорово! Скорее всего, вы много работали с Тильдой. Знаете толк в проектировании, дизайне, интернет-маркетинге и можете сделать классный проект!
| Попробовать еще раз |
Как создать опрос или голосование
Добавление блока с тестом на страницу
В библиотеке блоков перейдите в раздел «Форма и кнопка» → BF918 Тест
Изменение заголовка и описания теста
Откройте меню «Контент» в левой верхней части блока. Нажмите на вкладку «Начало теста». Измените заголовок, подзаголовок и описание теста. Добавьте изображение.
Вы создали начало теста: заголовок, изображение, описание и кнопку с призывом пройти тест.
Создание карточек с вопросами и вариантами ответов
Добавьте новую карточку или отредактируйте существующую.
Заголовок — напишите вопрос.
Ответ — напишите варианты ответов на вопрос. У каждого вопроса может быть до 6 вариантов ответа.
Описание — комментарий ответа.
Тип вариантов ответа — выбор сколько ответов могут быть правильными: один или несколько.
Номер правильного ответа — укажите номер цифрой (1, 2, 3. 6). Если вариантов несколько — перечислите через запятую.
Вопрос с одним вариантом ответа
Вопрос с несколькими вариантами ответа
Задайте результаты теста
Результаты записываются по порядку от меньшего к большему.
«Результат 1» – это результат при наименьшем проценте правильных ответов.
Максимальное количество различных результатов – 6.
В меню «Контент» блока перейдите на вкладку «Результаты».
Добавьте заголовок, описание и картинку для каждого результата.
Если вы добавите изображение только в один вариант результата, оно автоматически отобразится в остальных.
Пример.
У вас 10 вопросов и 4 результата: «плохо», «нормально», «хорошо», «отлично»
— «плохо» будет при 0-2 правильных ответах (до 25%)
— «нормально» будет при 3-4 правильных ответах (25-50%)
— «хорошо» будет при 5-7 правильных ответах (50-75%)
— «отлично» будет при 8-10 правильных ответах (75-100%)
Как сделать квиз на Тильде
В статье расскажем, зачем лендингу нужен квиз и как сделать квиз на Тильде с помощью двух инструментов: шаблонов форм от Тильды и встраиваемого квиза от Марквиз. Заодно копнём чуть глубже и поговорим про трафик.
Коротко о Тильде
Tilda — это конструктор сайтов и лендингов. Создать сайт на Тильде может абсолютно любой человек:
— для работы с Тильдой не нужно изучать программирование и писать код;
— публиковать сайт в интернете можно абсолютно бесплатно;
— есть 500+ шаблонов для новичков, чтобы сэкономить время на сборку сайта.
Тильда позволяет собрать лендинг за несколько дней. За это время можно подготовить рекламу и быстро получить первые заявки.
Почему связка «реклама + посадочная» слабеет
За время своего существования Тильда сильно снизила порог входа в маркетинг — CSM-сайтов стало много. Поэтому в последние годы связка начала ослабевать. Уже недостаточно создать страницу на конструкторе, собрать ключевики и поливать трафик.
�� Связано это с тем, что пользователю сложно принять решение и выбрать что-то за несколько секунд изучения сайта. И в маркетинге появилась большая проблема — конверсия посадочных страниц упала. Если раньше было достаточно базового описания, текста и формы с кнопкой, то сейчас работают лишь проработанные лендинги, которые собираются на основе интервью с пользователями и с детальным вниманием к UX/UI-дизайну.
Чтобы быть на коне, маркетологи пошли тестировать новые форматы. Примерно тогда же и появились конструкторы маркетинговых квизов. Давайте разберёмся, как работают квизы и как они помогают предпринимателям увеличивать конверсии.
Зачем в связке нужен квиз
Квиз — это интерактивный опрос, который помогает пользователю сделать выбор и оставить заявку. Благодаря механике ответов на вопросы, ему легче принять решение о покупке и стать лидом. Квиз помогает пользователю вовлечься в продукт и оставить контактную информацию для отдела продаж.
�� Когда добавили квиз в связку «реклама + посадочная», квизы стали новым «маленьким чёрным платьем» у маркетологов, так как хороший квиз даёт конверсию в 2–3 раза больше привычного лендинга.
Готовые шаблоны квизов на Тильде
Готовые квизы на Тильде всегда завязаны вокруг формы сбора контактов, поэтому сначала посмотрим раздел «Анкеты».
.jpg)
Несколько примеров шаблонов для создания квизов на Тильде в формате «Анкета»
Сами шаблоны отличаются между собой по типу задачи.
- Получение отзывов от клиентов
- Регистрация на мероприятие
- Бронирование номера в отеле
- Бриф для работы с клиентом
- Форма для сбора откликов на вакансию
Если у нас горячая аудитория, которой нужно просто записаться — создаём отдельную страничку с опросом и льём трафик сразу на форму.
Это тип блока с BF204N — одностраничная анкета со множеством полей
Все эти шаблоны отличаются между собой типом вопросов, которые используются в квизе, а значит, любой из шаблонов можно подстроить под себя буквально за пару кликов.
Если нужно всё-таки вести трафик сначала на сайт, то добавляем форму отдельным блоком. Всего форм чуть больше 20, большинство похоже на анкету и различаются вёрсткой и количеством полей.
Но анкета — это не квиз, у неё другая механика. Ближе к квизу блок BF919 «Пошаговая форма». Важно, что этот шаблон формы возможно добавить на сайт только если подключен платный тариф на Тильде.
.jpg)
Нажимаем плюс в том месте на сайте, где нужно поставить форму и выбираем в разделе «Форма» — BF919 «Пошаговая форма»
После этого мы можем заняться редактированием вопросов, дизайном и интеграциями.
Для каких целей могут подойти шаблоны форм в Тильде
Шаблоны и формы в Тильде выполняют утилитарные функции, по аналогии с формами Google. Их удобно использовать, если нужно:
— зарегистрировать готового пользователя на вебинар или мастер-класс, провести опрос, забронировать отель;
— собрать обратную связь от уже прогретой аудитории. Тильда собирает полученные заявки, которые приходят с формы. Информацию можно экспортировать в гугл-таблицы.
— собрать базу для последующей рассылки. Тильда интегрируется с CRM-системами и почтовыми сервисами. Можно настраивать уведомления на почту и в Телеграм.
— дать на сайте альтернативу звонку, если посетителю неудобно сейчас звонить. Добавляем ещё одну точку контакта с потенциальным клиентом.
Для каких целей не подойдут шаблоны форм в Тильде
В случаях, когда нужно выстроить аутентичную коммуникацию и помочь пользователю с выбором, шаблоны форм в Тильде не сработают:
— если нужна лидогенерация. Кроме механики вопросов нужны конверсионные фичи: подсказки консультанта, скидки и бонусы, результаты до формы контактов;
— если нужно предложить товар или услугу, в зависимости от ответов пользователя, или сегментировать лидов. В формах нет нескольких результатов и ветвления. Все видят одни и те же вопросы и одни и те же результаты;
— если нужно прогреть холодную аудиторию или тех, кто ещё сомневается в выборе. Пользователь не видит, как его ответы на вопросы могут влиять на результат, поэтому он менее вовлечен в вопросы и может не дойти до конца.
— если новичку нужно провести А/В-тестирование и сделать мультиквиз с динамическим контентом. Чтобы тестировать разные формы, нужно настроить UTM-метки и динамический контент, но придётся создавать дубли страниц с условиями показа того или иного блока на сайте. Быстрого решения в один клик нет.
В формах Тильды есть результат и количество заявок, но нельзя определить, на каком вопросе пользователи отваливаются чаще всего и сколько времени тратят на вопросы.
Для того чтобы создать квиз на Тильде, необязательно использовать только встроенные инструменты. Можно взять готовое решение, которое выиграет по дизайну и юзабилити, и увеличит конверсию вашего лендинга.
Создаём квиз для Тильды с помощью шаблона Marquiz
Давайте рассмотрим, как можно встроить квиз на лендинг Тильды с помощью конструктора маркетинговых квизов Marquiz.
Сначала соберём квиз на конструкторе.
Шаг 1. Выбор шаблона и регистрация в сервисе
Сейчас в галерее около 100 готовых шаблонов, которые легко можно подстроить под себя и свою задачу.
Марквиз создавался для лидогенерации, поэтому его основная цель — помочь пользователю сделать выбор и оставить заявку.
Выбираем подходящий шаблон. В галерее шаблоны не только по нишам, но и для разных пользовательских сценариев — в зависимости от того, какую аудиторию вы планируете привлечь — холодную или тёплую.
Нажимаем «Скопировать шаблон» и переходим в панель Марквиз.
2. Чтобы зарегистрироваться в конструкторе Marquiz, понадобится только ввести email.
В Марквизе нет пробного периода, весь функционал бесплатный. При регистрации вы можете получить до 70 заявок на баланс и использовать их в рекламной кампании. 1 заявка = 1 потенциальный клиент.
Шаг 2. Кастомизация квиза
Адаптируем квиз под себя и параллельно смотрим в конструкторе, как получается в десктопной и мобильной версии. Не нужно постоянно опубликовывать страницу и проверять, как квиз будет выглядеть на сайте.
.jpg)
Что можно докрутить в шаблоне:
Стартовую страницу. Используйте свою картинку или подберите другую с помощью встроенной интеграции с сервисом Unsplash. Измените заголовок-оффер, чтобы он больше попадал в вашу аудиторию.
Смотрите, как можно:
Вопросы. Лучше всего настроить разные форматы вопросов, чтобы пользователю было интереснее проходить квиз. В Марквизе есть на выбор 12 форматов вопросов на выбор, чтобы лучше донести идею.
В вопросах можно настроить ветвление и сегментировать пользователей, в зависимости от выбранных ответов.
Ответы. Мы встроили в квизы искусственный интеллект, который придумает варианты ответов на вопросы. Просто напишите вопрос и укажите количество вариантов, а искусственный интеллект за несколько секунд сгенерит возможные ответы пользователя. Используйте нейросеть, если хотите сэкономить время или найти новые идеи.
Результаты. Вместо фразы «Спасибо, данные отправлены», вы можете показать пользователю результаты его ответов на вопросы, которые будут показываться в зависимости от ответов.
Пользователь чувствует заботу, когда видит результаты прохождения своего квиза. Такой подход помогает повысить конверсию квиза.
Форму контактов. Именно здесь пользователь оставляет данные и переходит в состояние лида. В форме контактов можно добавить текст и объяснить пользователю, зачем ему оставлять контакты и что будет после.
Одно из преимуществ — использование мессенджеров. Не все пользователи готовы оставлять номер телефона, зато с лёгкостью оставят мессенджер, ведь больше времени люди проводят именно там. Используйте больше вариантов получения контактов, чтобы повысить конверсию квиза.
После заполнения формы, есть возможность показать страницу «Спасибо» или переадресовать пользователя на конкретную страницу, например, с товаром или услугой.
Шаг 3. Настройка интеграций
Давайте разберёмся в возможностях квизов и посмотрим, какие варианты для работы с данными есть у Marquiz.
1. У каждого квиза есть раздел «Заявки». Для удобной работы, можно скачать таблицу со всеми полями в два клика и отправить её в отдел продаж.
.jpg)
Дополнительно есть защита от дублей, верификация лида и блокировка IP-адресов, чтобы свести до минимума спамные заявки.
2. Можно подключить уведомления на почту и в Телеграм.
3. Для более глубокой и масштабной работы, можно интегрировать квиз с CRM-системой. Ответы пользователей будут попадать в разные ячейки CRM-системы, и это поможет автоматизировать продажи.
4. Для коммуникации с пользователями после квиза можно подключить интеграцию с почтовыми сервисами и настроить рассылки и воронки. Это помогает прогреть аудиторию и собирать базу для email-маркетинга.
5. В Марквизе есть своя аналитика. Она покажет конверсию от вопроса к вопросу, на каких шагах отваливается больше всего посетителей. Мало собрать хороший квиз, его нужно постоянно докручивать и повышать конверсию. Чтобы понимать, где точки роста, нужна подробная воронка.
�� Рассказываем в кейсе, как поднять конверсию квиза с помощью встроенной аналитики
Установка квиза на Тильду
Квиз от Marquiz встраивается в Тильду с помощью готового HTML-кода. Сейчас мы разберёмся в том, как это делается и каждый сможет это встроить квиз самостоятельно, без программиста.
В каком виде устанавливаем квиз
Первое — нам нужно определиться с форматом установки квиза на сайте.
В Марквизе есть 5 разных вариантов установки квиза на лендинг
Независимо от того, как вы хотите установить квиз — по кнопке, в теле, виджетом или поп-апом — установка каждый раз проходит одинаково в 2 этапа:
- Вставляем код инициализации в Content блока на Тильде, сохраняем и опубликовываем.
- Вставляем код квиза туда же, в Content ниже кода инициализации.
Как и куда встраиваем квиз
Есть два способа поставить квиз на сайт Тильды — через блок T123 и через Zero Block.
Способ 1. Установка кода через блок T123 — HTML-код. Этот способ установки квиза добавляет его в том месте, куда вы установите блок. Блок будет виден при скролле и загружаться при заходе на сайт
Блок «Другое» и форму Т123 на сайте
Способ 2. Установка HTML-кода в Zero Block. У предыдущих способов есть недостаток — ограниченная возможность кастомизации блока и расположения квиза. Используйте Zero Block, чтобы иметь больше возможностей. Добавляем HTML-код прямо в редакторе и устанавливаем квиз там, где хочется.
Результат встройки квиза от Marquiz на сайт Tilda. Для примера показываем два варианта:
1. Квиз баннером на сайте.
2. Квиз в теле сайта.
�� Инструкция, как встроить квиз на сайт Тильды, в том числе и через Тильдовскую кнопку
Мы показали 2 варианта: встроенный квиз от Тильды и встраиваемый квиз от Марквиза, чтобы вы смогли выбрать наиболее подходящий для своей задачи и выстроить свою воронку продаж.
В Марквизе можно бесплатно создавать квизы без ограничений по времени и функционалу. Платить надо только за заявки, которые приходят с квизов.
�� Посмотреть тарифы на заявки
Что будет, когда связка «сайт на Тильде и квиз» начнёт ослабевать
Всё ускоряется и заставляет маркетологов искать новые, более быстрые и эффективные решения. Что можно тестировать уже сейчас:
1. Лить трафик сразу на квиз. Во многих случаях, когда трафик идёт с контекстной рекламы или РСЯ, аудитория уже знает, чего хочет, и квиз помогает сократить воронку продаж на целый шаг и не терять в конверсии при переходе на сайт.
2. Лить трафик на быстрый и лёгкий лендинг. Часто в высокочековых нишах потенциальному пользователю легче принять финальное решение в разговоре с менеджером, чем самостоятельно изучать сайт со множеством блоков. Нужен инструмент, который бы одновременно рассказывал главное и сразу переводил на квиз. Лендинг Marquiz Pages — это быстрая посадочная страница, чтобы сориентировать пользователя по главным преимуществам продукта и мотивировать пройти квиз.
�� Пример — кейс, когда Marquiz Pages сработал лучше как посадочная, чем сайт и принёс 42 продажи с чеком 285 000 ₽
Marquiz Pages ещё подойдёт для быстрого тестирования гипотез, всё необходимое, что нужно для эффективного лендинга: фото, видео, ссылки + кнопка на квиз. Собирается быстро и бесплатно. Главное, что всё на одном конструкторе Marquiz и не нужно никакого кода.
Пробуйте создавать встраивать маркетинговые квизы от Marquiz на сайт Тильды или пользуйтесь готовым лендингом Marquiz Pages. Для начала посмотрите, какие шаблоны есть в галерее Марквиз.