Делаем свою картинку (виджет) для CallBack сервиса.

Andrey | 02.11.2015 | Вебмастеру (CMS, PHP, SEO) | Комментариев нет

Проведя тестирование для различных CallBack сервисов я столкнулся с проблемой, что большинство сервисов обладают одним большим недостатком. А именно — нельзя загрузить свой виджет, свою картинку которая бы гармонично вписалась в сайт или LP. (Если у вас нет магазина то рекомендую начать с покупки домена domain4ik.ru)  А сервис который выбрал я,  fastcallagent, имеет вообще очень тугой виджет. Не анимированный, относительно большой. Согласитесь, в этом случае внешний вид играет ключевую роль. Захочет человек клацнуть на картинку или нет решает именно дизайн. А значит и у индивидуальной, продуманной картинки — виджета будет больше конверсия чем у штатной. Те кто читал статью сравнение сервисов знают почему мы остановились именно на этой кампании. Но хоть виджет у них и не очень красивый, они сделали возможность добавить свою кнопку и вызывать диалоговое окно простым запросом

1

<a href="#fca-widget">Заказать звонок</a>

Грубо говоря это ссылка, где вместо URL идет якорь.

Итак, чтобы у нас получился красивый, удобный виджет, нам надо сделать следующее:

  1. Нарисовать картинку
  2. Сделать так чтобы картинка была закреплена в определенном месте экрана. т.е. если посетитель сайта будет прокручивать страницу кнопка смещаться не будет. Ее дело постоянно висеть на одном месте
  3. Виджет должен быть анимирован. Причем не средствами png, а средствами HTML, php
  4. Как только потенциальный лид попал на сайт сразу ему этот виджет показывать не надо, это только отвлечет его внимание. А начнем показывать когда он  прокрутит, спуститься, на определенный момент. Чаще всего этот пункт используется в LP, а не интернет магазинах. Но если у вас магазин, к примеру на базе OpenCart, то вы можете или пропустить этот пункт, или все же внедрить его. Все зависит от вашего шаблона.
  5. Виджет будем показывать в рабочее время с 10:00 до 19:00

На этом наше планирование законченно. Теперь нам надо приступать к выполнению нашего плана. Естественно пропускаем сразу первый пункт, поскольку рассказывать как нарисовать или где-то скачать картинку мы не будем.

Как сделать, чтобы картинка была закреплена в определенном месте экрана.

  1. Для этого в файл CSS (если он у вас отдельно лежит), прописываем: 
    1
2
3
4
5
6

    .callback {
 position: fixed;
 right: 10px; /* Расстояние от правого края окна браузера */
    top: 95%; /* Расстояние сверху */
    margin-top: -150px; /* Расстояние от нижнего края экрана */
}

    Если же у вас стили прописаны прямо в index.php то вставьте этот код сразу после строчки

    1

    <style type="text/css">
  2. Теперь, мы можем, в теле нашего одностраничника, после открывающегося тега <bodу> написать такой код: 
    1

    <div class="callback" ><a href="#fca-widget"><img src="/images/callback.png"></a></div>

    И картинка будет закреплена в нижнем правом углу экрана.

Как анимировать картинку

  1. Чтобы не рисовать анимированные гифки проще всего, как я писал в плане, будет запустить анимацию программными средствами. Для этого, для начала, качаем архив. Достаем от туда два файла и кладем в корень сайта.
  2. После строчки 
    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>
  3. Теперь давайте вернемся  к коду который мы оставили в прошлом абзаце. Итак, кнопка у нас выводится кодом: 
    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. Для этого наш код который получился в прошлом пункте 
    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>
  2. И в конце всего кода, на новой строчке добавим: 
    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>

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

Похожие записи

Об авторе

Error: Не могу создать директорию wp-content/uploads/2022/01. Проверьте, доступна ли родительская директория для записи.
Andrey

Администратор блога. Специалист по маркетингу, развитию бизнеса, здоровому образу жизни. Владелец и директор двух компаний в Украине. Сертифицированный специалист Apple. Увлечения: бизнес, спорт, дайвинг.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *