Как создать виджет с опросом

В Convead вы можете создавать виджеты с небольшими опросами (например, с двумя кнопками выбора или с выпадающим списком). Такие виджеты могут быть полезны, чтобы:

• Узнать, откуда человек узнал про магазин
• Уточнить интересующие его категории товаров
• Узнать дополнительную информацию (например, есть ли у человека кошка, собака или попугай)

В этой статье разберем, как сделать такой виджет.

Виджет с выпадающим списком

1. Создайте индивидуальное поле, куда будут записываться данные из вашего виджета

   Подробнее про создание индивидуального поля можно прочитать здесь. Это поле нужно, чтобы в дальнейшем вы смогли построить сегменты на основе данных из виджета.

   Предположим, что мы создали поле текстовое поле "Питомец".

2. Создайте виджет

   Для примера возьмем поп-ап виджет (всплывающее окно). Выберите один из шаблонов и пустой вариант и переходите во вкладку "Контент".

3. Добавляем поле в виджет и делаем выпадающий список

   По умолчанию в конвиде нет поля с выпадающим списком, но вы можете создать такой через 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> - это то, что покажется клиентам в вашем виджете.

<option value='Planning out email newsletters'>Planning out email newsletters</option>

Вы также можете отредактировать дизайн, изменив параметры внутри <style>.

Готово! Наш виджет с выпадающим списком готов к использованию. Не забудьте выполнить предпросмотр и попробовать заполнить его самостоятельно.