Туториал: как сделать виджет а-ля Ламода с кнопками «Для мужчин» и «Для женщин»

17 октября 2016 | Лайфхаки и хитрости

Рассмотрим по шагам, как сделать виджет с двумя кнопками «Для женщин» и «Для мужчин». Он автоматически запомнит, на какую кнопку нажал посетитель и запишет в Конвид выбранный пол. 

Виджетами можно не только спрашивать email или сообщать о новых акциях, но и собирать всякого рода информацию о посетителях. Дальше их можно сегментировать и показывать более релевантный, персонализированный контент на сайте и в рассылках. Это нужно конечно же для того, чтобы повысить продажи.

Делаем такой виджет:

Виджет а-ля Ламода с кнопками «Для мужчин» и «Для женщин»

Нам потребуется: редактор виджетов Convead, подходящая фоновая картинка, поверхностное знакомство с CSS и 10 минут времени.

Две кнопки рядом

По умолчанию в виджетах Convead элементы выстраиваются один под другим, но можно довольно легко поставить две кнопки (или любое количество любых блоков) в ряд. 

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

Создание виджета в Конвиде

Сверху и снизу видим белые поля, но пока внимания на них не обращаем. Когда мы подвинем кнопки, виджет уменьшится по высоте автоматически и поля пропадут.

Чтобы подвинуть кнопку, открываем ее настройки (нажимаем на кнопку и видим справа панельку). Находим настройку «Внешние отступы» и прописываем для синей кнопки отступ справа, а для красной – отрицательный отступ сверху. Таким образом синяя кнопка сдвинется влево, а красная – вверх.

Как подвинуть кнопки в виджете в Конвиде

Теперь все выглядит хорошо, но есть один тонкий технический момент. Если внимательно посмотреть на кнопку, то видно, что она находится в блоке (голубая рамка), который растягивается почти на всю ширину виджета. Когда мы ставим кнопки рядом, эти блоки перекрываются и синяя кнопка оказывается под блоком красной кнопки и на нее становится невозможно нажать.

Чтобы это исправить выносим синюю кнопку на передний план. Для этого, для каждой кнопки в блоке CSS прописываем такой код:

position:relative;
z-index:1;

Значение z-index для синего блока (того, который мы выносим на верхний слой) должно быть больше, чем для красного, например 1 для синего и 2 для красного.

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

Когда кнопки перекрывают друг друга в редакторе, их сложно выбрать мышкой. Используйте для выбора нужной кнопки меню элементов в нижней части левого сайдбара.

Чтобы проверить, правильно ли вы прописали z-index, выбирайре в редакторе то одну, то другую кнопку и смотрите, меняются ли свойства на правой панели. Если меняются, то все в порядке.

Передача выбранного пола в Конвид

Самое сложное позади. Теперь говорим Конвиду, что при нажатии на синюю кнопку нужно запоминать что посетитель – мужчина, а при нажалии на красную – женщина.

Выбираем по очереди каждую из кнопок, в правом сайдбаре находим пункт «Действие при нажатии», выбираем «Выполнить JavaScript». В поле ниже вставляем код:

convead('event', 'update_info', {}, {gender: "female"});

Для женщин значение в кавычках – female, для мужчин – male.

Сохранение пола при нажатии на кнопку в виджете Конвида

Все готово! Проверяем на предпросмотре и запускаем.

Теперь как только посетитель нажмет на одну из кнопок «Для МЕСЬЕ» или «Для МАДАМ», Конвид автоматически запишет значение male или female в стандартное поле gender (пол). По этому полю в Конвиде можно сегментировать посетителей, чтобы более адресно с ними работать.

Нажатие на любую из кнопок считается «отправкой» виджета. Вы можете настроить отправку письма на указанный емэйл сразу при нажатии на кнопку. Причем дамам можно отправлять одно, а джентльменам – другое. 

Пробуйте, и говорите, если что-то не получается или не понятно. А если у вас еще нет аккаунта в Конвиде – то вы рискуете не успеть за конкурентами. Они уже вовсю пользуются Конвидом, сегментируют посетителей и повышают продажи.

В базовой комплектации Convead устанавливается на популярные CMS за 3 минуты: