После тестирования конверсии на сайте в заявку с виджетами и без, было выявлено, что в добавлении трех виджетов из топ пяти основных конверсия landing page увеличивалась.
Самый лучший виджет оказался всплывающее окошко с дополнительной ценной информацией в фиксированной позиции position: fixed и расположением в нижнем углу.
Содержание статьи
Топ пять виджетов для лендингов.
1). Всплывающее окошко через две секунды внизу слева.
В этом виджете можно делать всплывание формы заказа, но это будет навязчиво, поэтому лучше, чтобы всплывало сообщение с основным преимуществом товара.
Код в index.html.
|
1 2 3 4 5 6 |
<div id="parent_popup"> <div id="popup"> Пишем основное приемущества товара! <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div> </div> <script type="text/javascript">var delay_popup = 6000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
#parent_popup display: none position: fixed z-index: 99999 bottom: 0 right: 0 #popup font-size: 1.2em background: #fff width: 300px padding: 5px 20px 13px 20px border: 3px solid #b641b0 position: relative -webkit-box-shadow: 0px 0px 20px #000 -moz-box-shadow: 0px 0px 20px #000 box-shadow: 0px 0px 20px #000 -webkit-border-radius: 15px -moz-border-radius: 15px border-radius: 15px .close background-color: rgba(0, 0, 0, 0.8) border: 2px solid #ccc height: 24px line-height: 24px position: absolute right: -24px cursor: pointer font-weight: bold text-align: center text-decoration: none color: rgba(255, 255, 255, 0.9) font-size: 14px text-shadow: 0 -1px rgba(0, 0, 0, 0.9) top: -24px width: 24px -webkit-border-radius: 15px -moz-border-radius: 15px -ms-border-radius: 15px -o-border-radius: 15px border-radius: 15px -moz-box-shadow: 1px 1px 3px #000 -webkit-box-shadow: 1px 1px 3px #000 box-shadow: 1px 1px 3px #000 &:hover background-color: rgba(0, 122, 200, 0.8) |
2). Виджет всплывающее окошко с указанием покупателя, и какой он товар приобрел.
Окошко появляется через минуту в верхнем углу справа.
Через пять секунд исчезает.
При этом посетитель видит сообщение, что произошла покупка товара.
Срабатывает триггер продаж у посетителя.
Если другие покупают, значит товар хороший, и я куплю.
Два вида сообщений.
- Первое, когда человек купил, появится изображение корзины
- и текста и когда заказали обратный звонок изображение телефона.
Сообщения можно чередовать для разнообразия.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="yvedw"> <div class="yved yvedf1"> <img src="img/yico.png" alt="" class="yvedi"> <div class="yvedvt"><div class="yvedt">Дмитрий Петров, сделал заказ!</div></div> </div> <div class="yved yvedf1"> <img src="img/yico.png" alt="" class="yvedi"> <div class="yvedvt"><div class="yvedt">Иван Тургеньев, сделал заказ на товар! </div></div> </div> <div class="yved yvedf2"> <img src="img/yico2.png" alt="" class="yvedi"> <div class="yvedvt"><div class="yvedt">Виктория Столова, оставила заявку на обратный звонок.</div></div> </div> </div> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.yved position: fixed z-index: 3 right: 30px top: 80px vertical-align: middle height: 120px color: white padding: 15px font-size: 1em line-height: 90px border-radius: 10px display: none .yvedi float: left width: 50px !important margin-right: 10px margin-top: 20px .yvedt width: 220px line-height: normal display: inline-block vertical-align: middle font-size: 1.2em .yvedf1 background-color: #b641b0 .yvedf2 background-color: #b641b0 .yvedvt float: left height: 70px line-height: 70px display: inline-block vertical-align: middle |
Код в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('<link rel="stylesheet" href="/yved/style.css">').appendTo('head'); var i = 0; function yved(){ i=1; $('.yved:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//время анимации } setTimeout(function(){ setInterval( function(){ i=i+1; if(i>10) i=1;//сколько уведомлений $('.yved:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//время анимации },10000);//между показами yved(); },10000); // перед показом первого |
3). Чат онлайн.
Посетитель может написать сразу в чат, если торопится или не привык ждать.
Чат лучше использовать от социальной сети vk, она самая популярная или живосайт.
Чат от vk установить просто. Пишем в поисковике и читаем полную инструкцию.
Будет два кода у чата.
- Первый расположится в конце шапки перед закрывающим тегом head.
- Вторая часть кода перед закрытием тела сайта тегом body.
4). Количество людей, которые купили товар сегодня.
Располагается виджет внизу в углу в окошку, либо над шапкой сайта.
Используем триггер эффект толпы, который остался от древнего мышления, подробно тут.
Количество людей на сайте и сколько человек было на сайте.
Можно объединить с виджетом сколько человек купили товар сегодня.
Указать три цифры возле друг друга.
На складе осталось мало товара или осталось последнее место.
Триггер дедлайн. Посетитель думает, что может не успеть, а если еще и акция, то точно нужно купить сейчас.
5). Последний виджет называется, мы заморозили цену.
Появляется сбоку окошко с изображением льда и надписью, что цена заморожена.
Добавь себе один или несколько виджетов на лендинг пейдж и увеличь конверсию.