В Convead вы можете создавать виджеты с небольшими опросами (например, с двумя кнопками выбора или с выпадающим списком). Такие виджеты могут быть полезны, чтобы:
- Узнать, откуда человек узнал про магазин
- Уточнить интересующие его категории товаров
- Узнать дополнительную информацию (например, есть ли у человека кошка, собака или попугай)
В этой статье разберем, как сделать такой виджет.
Виджет с выпадающим списком
Создайте индивидуальное поле, куда будут записываться данные из вашего виджета
Подробнее про создание индивидуального поля можно прочитать здесь. Это поле нужно, чтобы в дальнейшем вы смогли построить сегменты на основе данных из виджета.
Предположим, что мы создали поле текстовое поле "Питомец".
Создайте виджет
Для примера возьмем поп-ап виджет (всплывающее окно). Выберите один из шаблонов и пустой вариант и переходите во вкладку "Контент".
Добавляем поле в виджет и делаем выпадающий список
По умолчанию в конвиде нет поля с выпадающим списком, но вы можете создать такой через html код. Для этого выберите блок "Ваш код" в панели слева и перетащите его в то место виджета, где должно быть поле с выпадающим списком.
Подробнее про создание индивидуального поля можно прочитать здесь. Это поле нужно, чтобы в дальнейшем вы смогли построить сегменты на основе данных из виджета.
Предположим, что мы создали поле текстовое поле "Питомец".
Создайте виджет
Для примера возьмем поп-ап виджет (всплывающее окно). Выберите один из шаблонов и пустой вариант и переходите во вкладку "Контент".
Добавляем поле в виджет и делаем выпадающий список
По умолчанию в конвиде нет поля с выпадающим списком, но вы можете создать такой через html код. Для этого выберите блок "Ваш код" в панели слева и перетащите его в то место виджета, где должно быть поле с выпадающим списком.
В поле "код HTML" справа вставьте заготовку:
<style>
.cnv-widget_workarea .cnv-f__select {
width: 316px;
height: 45px;
border-radius: 6px;
border-style: solid;
border-width: 1px;
border-color: #dadee3;
text-align: left;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
align-items: center;
text-align: left;
color: #9A9A9A;
}
@media screen and (max-width: 705px){
.cnv-widget_workarea .cnv-f__select {
width: 236px;
height: 52px;
}
</style>
<select class="convead_required cnv-f__input convead_required cnv-f__select" name="properties[pain]" placeholder="What troubles you the most?" style="height: 56px;margin-top: 20px;width: 425px;color: #9A9A9A;" id="cnv-f-input" >
<option style="color: #9A9A9A;">What gives you the most trouble?</option>
<option value='Developing the marketing strategy'>Developing the marketing strategy</option>
<option value='Collecting the subscriber data'>Collecting the subscriber data</option>
<option value='Collecting the subscriber data'>Collecting the subscriber data</option>
<option value='Increasing repeat sales and loyalty'>Increasing repeat sales and loyalty</option>
<option value='Segmenting my mailing lists'>Segmenting my mailing lists</option>
<option value='Creating email content'>Creating email content</option>
<option value='Crafting email designs and layouts'>Crafting email designs and layouts</option>
<option value='Analyzing and reporting the results'>Analyzing and reporting the results</option>
<option value='Enhancing email marketing'>Enhancing email marketing</option>
<option value='Planning out email newsletters'>Planning out email newsletters</option>
</select>
Далее отредактируйте вопрос, который увидят пользователи, изменив placeholder="What troubles you the most?" в строке 26.
После этого отредактируйте варианты ответов, вставив свои варианты. То, что вы пропишете в value отобразится в карточке клиента конвида в индивидуальном поле. А надпись после value, перед </option> - это то, что покажется клиентам в вашем виджете.
После этого отредактируйте варианты ответов, вставив свои варианты. То, что вы пропишете в value отобразится в карточке клиента конвида в индивидуальном поле. А надпись после value, перед </option> - это то, что покажется клиентам в вашем виджете.
<option value='Planning out email newsletters'>Planning out email newsletters</option>Вы также можете отредактировать дизайн, изменив параметры внутри <style>.
Готово! Наш виджет с выпадающим списком готов к использованию. Не забудьте выполнить предпросмотр и попробовать заполнить его самостоятельно.
Готово! Наш виджет с выпадающим списком готов к использованию. Не забудьте выполнить предпросмотр и попробовать заполнить его самостоятельно.