Появление кнопки через определенное время. Появление кнопки заказа через заданное время (скрипт). Как это работает

Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх . Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу:)

Как-то изначально так сложилось, что при ведении блога я решил отказаться от постраничной разбивки комментариев к постам. Не знаю почему, может не хотел плодить лишних страниц, а может и не верил, что у меня может быть более 50 комментариев к одному посту, так или иначе, свое мнение я не изменил до сих пор – все комментарии к постам выводятся одной страницей. Однако, вот незадача, некоторые посты на моем блоге набрали уже более 500 комментариев, и это не смотря на то, что я раз в месяц их подчищаю. Короче, это была предыстория – а результат такой, что пришлось добавить на блог кнопку вверх. В результате навигация по длинным постам с комментариями значительно упростилась.

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально:) Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем .

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом

$(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$("#scroller").fadeIn();} else {$("#scroller").fadeOut();}}); $("#scroller").click(function () {$("body,html").animate({scrollTop: 0}, 400); return false;}); });

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом

наверх

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту) .

B-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);} .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;} ..png) no-repeat 50% 11px;border-radius:7px;}

Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов. На Яндексе пропала картинка, указал путь к картинке на своем сервере, а вам рекомендую ее сохранить к себе, будет надежнее.

Что тут можно настроить и изменить под себя:

• bottom:90px; – смещение блока с кнопкой относительно низа страницы;
• width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
• padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
• color:white; — цвет надписи «вверх»;
• border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

Все готово , надеюсь, ничего не забыл. Безумно просто и настолько же полезно для сайтов с очень длинными страницами.

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

С уважением, Александр Алаев

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

Суть. Когда человек заходит на продающий видеопродажник и видит кнопку заказать, он закрывает страницу, ибо мысль “ага, опять какую-то фигню впаривают”. Кому знакомо? Честно я и сам редко смотрю до конца подобные рекламные видеоролики, потому что вижу кнопку заказать, и понимаю что, сейчас будет красивая иcтория успеха, а в конце предложение купить какой ни будь обучающий курс или еще какую ни будь “фигню”. Хотя на самом деле, предложение может оказаться далеко не “фигней”, и очень даже для многих выгодным.

И тогда, возникает вопрос. Как заставить человека, досмотреть видеоролик до конца, что бы он сходу не закрывал страницу, испугавшись большой красной кнопки “заказать” (купить, подписаться) ??

Все очень просто! Нужно эту большую красную кнопку “заказать” (купить, подписаться), не показывать сразу, а показать ее например в тот момент, когда в видеоролике пойдет речь о вашем продукте. И тогда человек с большей вероятностью как минимум сразу не закроет страницу и будет смотреть ролик, ибо не будет знать, что за этим кроется, например какое-то коммерческое предложение. Посмотрите как это работает на реальном примере, кликните
по (смотрите видео до конца, внимательно!!).

Как это работает?

Да очень просто. Рекламный ролик длится 3 минуты 10 секунд, на второй минуте, в тот момент, когда речь идет о видеокурсе срабатывает простенький скрипт, за счет которого происходит отображение кнопки заказа. Сам скрип вы видите ниже

var obj = document.getElementById("link"); var timerFIG = 120; // Время в секундах, через которое появляется кнопка var timer = setInterval("startTimer()",1000); function startTimer() { if(timerFIG !== 1) { timerFIG--; } else { clearInterval(timer); obj.innerHTML = ""; // кнопка }}

Приветствую вас, посетители моего блога! Вот и лето пролетело как-то незаметно и у нас резко наступила осень со всем ее атрибутами – дождями, сыростью и слякотью. С одной стороны, конечно – хочется тепла и солнца, а с другой — сейчас самое время создавать продукты или продвигать партнерки. Ведь осенью интернет оживает и большинство инфобизнесменов приступают к активной деятельности, да и продажи начинают расти – люди возвращаются с морей, дач и все чаще просиживают в интернете.

И сегодня я с вами поделюсь очень классной информацией о ом, как можно запросто увеличить как свои, так и партнерские продажи. Этот метод называется – всплывающая кнопка под видео.

Этот метод нельзя назвать новым – ему уже более двух лет, но я смотрю, что его часто используют известные инфобизнесмены, а значит, он актуален.

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

Например, вы рассказываете о всех прелестях вашего нового курса и в нужный момент под вашим видео появляется кнопка заказа – это и смотрится эффектно и не так сильно отталкивает посетителей от вашего видео.

Вот, смотрите видеоурок по настройке данной кнопки и применяйте этот метод на своих сайтах – уверен, что конверсия будет существенно выше.

А теперь самое интересное – вы только что узнали про то, как вставлять кнопку покупки на страницу с видео. НО!

Проблема данного метода в том, что кнопка заказа появляется под видео независимо от того воспроизводится видео или нет. То есть, человек открыл вашу страницу, начал смотреть видео и у него закипел чайник, он поставил видео на паузу, пошел на кухню, а когда вернулся, то увидел, что под видео уже появилась кнопка заказа. А он даже ничего не услышал и не понял, что происходит – только что было просто видео 9кеак он думал0, а потом резко появилась кнопка.

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

Но есть решение этой проблемы!

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

То есть, вы сами задаете время в вашем видео, на которое появится кнопка. И если видео поставлено на паузу, то кнопка НЕ появится т посетитель не будет озадачен.

Также есть возможность поставить несколько кнопок, которые будут исчезать и появляться на определенном фрагменте вашего видеоролика. Например, вы провели вебинар и сделали его запись, потом выложили на своем блоге и поставили на нем три кнопки – две на покупку разных ваших продуктов, а одну сделали в виде формы подписки. Причем, каждая их этих кнопок появляется в тот момент, когда вы говорите о конкретном продукте – это будет очень удобно, если вы ведете презентацию нескольких ваших продуктов или, например, перечисляете товары или услуги вашей компании и в нужный момент появляется кнопка на покупку именно того продукта, про который в данный момент идет речь.

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

Также можно запретить перематывать видео до конца и тем самым посетитель вашей страницы не сможет промотать его и ему только останется смотреть видео до конца.

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

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

Получить чек-лист по настройке автоматических продаж!