Делаем свою картинку (виджет) для CallBack сервиса.
|Проведя тестирование для различных CallBack сервисов я столкнулся с проблемой, что большинство сервисов обладают одним большим недостатком. А именно — нельзя загрузить свой виджет, свою картинку которая бы гармонично вписалась в сайт или LP. (Если у вас нет магазина то рекомендую начать с покупки домена domain4ik.ru) А сервис который выбрал я, fastcallagent, имеет вообще очень тугой виджет. Не анимированный, относительно большой. Согласитесь, в этом случае внешний вид играет ключевую роль. Захочет человек клацнуть на картинку или нет решает именно дизайн. А значит и у индивидуальной, продуманной картинки — виджета будет больше конверсия чем у штатной. Те кто читал статью сравнение сервисов знают почему мы остановились именно на этой кампании. Но хоть виджет у них и не очень красивый, они сделали возможность добавить свою кнопку и вызывать диалоговое окно простым запросом
1 | <a href="#fca-widget">Заказать звонок</a> |
Грубо говоря это ссылка, где вместо URL идет якорь.
Итак, чтобы у нас получился красивый, удобный виджет, нам надо сделать следующее:
- Нарисовать картинку
- Сделать так чтобы картинка была закреплена в определенном месте экрана. т.е. если посетитель сайта будет прокручивать страницу кнопка смещаться не будет. Ее дело постоянно висеть на одном месте
- Виджет должен быть анимирован. Причем не средствами png, а средствами HTML, php
- Как только потенциальный лид попал на сайт сразу ему этот виджет показывать не надо, это только отвлечет его внимание. А начнем показывать когда он прокрутит, спуститься, на определенный момент. Чаще всего этот пункт используется в LP, а не интернет магазинах. Но если у вас магазин, к примеру на базе OpenCart, то вы можете или пропустить этот пункт, или все же внедрить его. Все зависит от вашего шаблона.
- Виджет будем показывать в рабочее время с 10:00 до 19:00
На этом наше планирование законченно. Теперь нам надо приступать к выполнению нашего плана. Естественно пропускаем сразу первый пункт, поскольку рассказывать как нарисовать или где-то скачать картинку мы не будем.
Как сделать, чтобы картинка была закреплена в определенном месте экрана.
- Для этого в файл CSS (если он у вас отдельно лежит), прописываем:
1 2 3 4 5 6
.callback { position: fixed; right: 10px; /* Расстояние от правого края окна браузера */ top: 95%; /* Расстояние сверху */ margin-top: -150px; /* Расстояние от нижнего края экрана */ }
Если же у вас стили прописаны прямо в index.php то вставьте этот код сразу после строчки
1
<style type="text/css">
- Теперь, мы можем, в теле нашего одностраничника, после открывающегося тега <bodу> написать такой код:
1
<div class="callback" ><a href="#fca-widget"><img src="/images/callback.png"></a></div>
И картинка будет закреплена в нижнем правом углу экрана.
Как анимировать картинку
- Чтобы не рисовать анимированные гифки проще всего, как я писал в плане, будет запустить анимацию программными средствами. Для этого, для начала, качаем архив. Достаем от туда два файла и кладем в корень сайта.
- После строчки
1
<head>
Вставьте такой код:
1 2 3
<link rel="stylesheet" media="all" href="callback_animation.css"> <script src="wow.min.js"></script> <script>new WOW().init();</script>
- Теперь давайте вернемся к коду который мы оставили в прошлом абзаце. Итак, кнопка у нас выводится кодом:
1
<div class="callback" ><a href="#fca-widget"><img src="/images/callback.png"></a></div>
Чтобы ее анимировать заменяем
1
<img src="/images/callback.png">
на
1
<img src="images/callback.png" class="pulse wow" data-wow-iteration="10000000000" >
Как видите добавились только разные приставки. Давайте разберемся что каждая из них означает.
-
1
class="pulse wow"
это выбор анимации. Вы можете зайти на сайт animate.css и выбрать анимацию которая вам понравится. Лично мне пришлась по вкусу pulse. Если вам подойдет другая просто вставьте ее название вместо pulse. Слово Wow не трогайте
-
1
data-wow-iteration="10000000000"
это повторят анимацию 10000000000 раз. т.е. сделать ее вечной. Чтобы картинка не прекращала анимироваться, а постоянно пульсировала до тех пор пока клиент на сайте.
Как сделать чтобы картинка появлялась после скрола, а не сразу
Мы уже с вами сделали так чтобы наш виджет висел в определенном месте экрана, и более того был анимирован. Давайте теперь сделаем так чтобы сразу, как только клиент зашел на наш одностраничник ему виджет не показывался, а появлялся после того как он будет скролить.
- Для этого наш код который получился в прошлом пункте
1
<div class="callback" ><a href="#fca-widget"><img src="/images/callback.png" class="pulse wow" data-wow-iteration="10000000000" ></a></div>
Мы опять же таки чуть изменим. Вместо
1
<div class="callback" >
мы напишем
1
<div class="callback" id='callback_ID' hidden>
- И в конце всего кода, на новой строчке добавим:
1 2 3 4 5 6 7 8 9
<script> var screenHeight = 450; window.onscroll = function(event) { if (window.pageYOffset > screenHeight) { callback_ID.hidden = false; } } </script>
где 450 это растояние в пикселях от начала страницы. Когда потенциальный клиент прокрутит до 450 пикселя ему покажут наш виджет.
Итак, у нас суммарно вышел код:
1 2 3 4 5 6 7 8 9 10 11 | <div class="callback" id='callback_ID' hidden><a href="#fca-widget"><img src="/images/callback.png" class="pulse wow" data-wow-iteration="10000000000" ></div></a> <script> var screenHeight = 450; window.onscroll = function(event) { if (window.pageYOffset > screenHeight) { callback_ID.hidden = false; } } </script> |
Как показывать картинку в зависимости от времени
По сути у нас уже есть готовый код. Теперь нам надо показывать его в рабоче время и убирать в не рабочее. Я уже описывал и решал подобную задачу в статье Тюнинг страницы благодарности в Landing page или меняем текст в зависимости от времени HTML и PHP. Все что нам осталось это чуть его поменять и доработать.
Итак, чтобы нам было проще разбираться с кодом вывод картинки выводим в отдельную переменную, к примеру VivodimCallBack.
В итоге у нас выходит код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php $VivodimCallBack = '<img src="/images/callback.png" class="pulse wow" data-wow-iteration="10000000000" >'; ?> <div class="callback" id='callback_ID' hidden><a href="#fca-widget"><?php echo $VivodimCallBack; ?></div></a> <script> var screenHeight = 450; window.onscroll = function(event) { if (window.pageYOffset > screenHeight) { callback_ID.hidden = false; } } </script> |
И по сути все что нам осталось это сделать маленькую проверку по времени. 1) Запросить сколько сейчас часов. 2) Если сейчас больше 10 часов и меньше 19 часов то мы назначаем переменной код картинки. Если сейчас не рабочий интервал времени то мы не назначаем код картинки, а значит она не выводится.
Такую проверку можно сделать так:
1 2 3 4 | $chasov = date("H"); if($chasov >= 10 and $chasov < 19) {$VivodimCallBackilinet = $VivodimCallBack;} |
И соответственно чуть изменить основной код. В итоге у нас основной код вышел:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php $VivodimCallBack = '<img src="/images/callback.png" class="pulse wow" data-wow-iteration="10000000000" >'; $chasov = date("H"); if($chasov >= 10 and $chasov < 19) {$VivodimCallBackilinet = $VivodimCallBack;} ?> <div class="callback" id='callback_ID' hidden><a href="#fca-widget"><?php echo $VivodimCallBackilinet; ?></div></a> <script> var screenHeight = 450; window.onscroll = function(event) { if (window.pageYOffset > screenHeight) { callback_ID.hidden = false; } } </script> |
На этом все. Но если у вас возникли вопросы или пожелания напишите в комментариях, попробую вам помочь.