Меню

Как вставить счетчик обратного отсчета



3 готовые решения — как вставить таймер обратного отсчёта на сайт 37

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

А ещё этот метод понадобится вам, если вы будете копировать продающею страницу партнёрского продукта. Это не просто копия партнёрского сайта во фрейме, — это полноценная копия, где Вы можете настроить цели Яндекс.Метрики и отслеживать подробную статистику.

Но, вот только если на партнёрских страницах стоят подобные счётчики, то они работать не будут. Потому, как помимо копирования html кода, css стилей и картинок, — нужно ещё и скрипты скопировать, а это не всегда удаётся сделать.

И поэтому этот метод позволит вам использовать таймер обратного отсчёта для любых целей.

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

Таймер обратного отсчёта на основе JavaScript

Этот метод хоть и требует определённого знания хотя бы HTMLи CSS, зато имеет максимум возможностей для настройки. Изменяя код htmlи настраивая стили css, можно легко подогнать данный счётчик под любой дизайн.

Скопируйте архив с моего Яндекс.Диска и распакуйте архив на своём компьютере. Скачать архив .

В архиве у вас будет 4 файла:

counter.html – собственно html каркас счётчика

jquery.downCount.js – скрипт обратного отсчёта

style.css – стили оформления

time.png – изображения для счётчика

Все необходимые изменения вы будете делать именно в этих файлах.

Прежде чем приступить к установке счётчика, необходимо установить дату намеченного события. Дата должна быть в будущем времени, иначе счётчик не будет отображаться. Помните это, на случай если счётчик не отображается на экране.

Установка даты осуществляется в файле counter.html . Необходимо просто изменить дату и время. Все необходимые подсказки в файле присутствуют.

Теперь необходимо скопировать всю папку с этими файлами на ваш сервер. Делайте это любым удобным для вас способом. Если у вас блог под управлением WordPress, загрузите папку в папку Вашей темы:

В том месте, где необходимо отобразить таймер обратного отсчёта, нужно вставить вот такой код:

Только учтите, делается вставка в редакторе кода. То есть вставляете код в html код той страницы, где нужно вывести таймер.

Так будет выглядеть таймер:

Таймер номер один

А вот и видеоурок «Как вставить таймер обратного отсчёта на сайт»

Онлайн генератор таймера обратного отсчёта

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

На выбор предлагается 4 варианта оформления счётчика. Нужно выбрать который подходит вам, и нажать на кнопку «Выбрать».

Далее нужно задать дату и время запланированного мероприятия и нажать на кнопку «Создать счётчик».

Установка времени и даты

Копируете полученный код в буфер обмена (CTRL+C).

И завершающий этап, вставляете это код (CTRL+V) в нужном месте вашего шаблона. Опять же, делается это через редактор кода.

Таймер номер два

Таймер обратного отсчёта с сервисом proТаймер

Это платный сервис, который ориентирован на интернет-предпринимателей, которые чётко знают для чего им таймер обратного отсчёта. Сервис proТаймер предоставляет многофункциональные таймеры с помесячной и годичной оплатой.

Эти таймеры настраиваются и под сервисы e-mail рассылок и под индивидуального пользователя. Привязаны к IP, а не к браузеру и поэтому счётчик у пользователя не начинается заново, даже если он зайдёт с другого браузера.

На пробу (2 часа), Вы можете попробовать полный функционал этого сервиса.

Процедура не хитрая, регистрируетесь – получаете доступ и пользуетесь.

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

На этом сегодня у меня всё, желаю вам удачи. И конечно жду ваших комментариев. До встречи в следующих статьях.

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

Источник

13 сервисов для создания таймера обратного отсчета времени для сайта

В сем привет! Сегодня в статье пойдет речь про сервисы и скрипты таймеров обратного отсчета времени для сайтов. Согласитесь, иногда такая функция просто необходима! Например, как это сделано у меня, обратный отсчет времени сколько осталось до окончания конкурса.

Читайте также:  Счетчики гвс с контролем температуры

Представьте, что вы что-то продаете на сайте и проводите акцию, которая должна продлиться 10 дней. Но как реализовать таймер на своем сайте? Ответ на данный вопрос вы найдете в статье. А именно 8 сервисов и 5 скриптов, с помощью которых вы реализуете таймер у себя на сайте!

В конце статьи я расскажу, как таймер реализован у меня (смотрите сайдбар).

Где и для чего использовать таймер?

Немного слов о том для чего может понадобится отсчет времени:

  1. Сайт-одностраничник с продажей курса.
  2. Таймер до окончания акции.
  3. Таймер до окончания конкурса или события на блоге.
  4. Сколько дней живет ваш блог.
  5. Сделать заглушку сайта с обратным отсчетом.
  6. Сколько времени осталось до нового года или любого другого праздника.
  7. Сколько времени продлиться распродажа.
  8. Сколько времени у вас есть чтобы приобрести товар по низкой цене.

8 сервисов таймера обратного отсчета времени

  • Удобный интерфейс
  • Присутствует обратная связь и описание таймера
  • Легок в использовании
  • Есть возможность выбора настроек
  • Выбор подключена ли Библиотека jQuery и перезапускать ли таймер
  • Настройки отображения таймера
  • Настройки отображения цифр
  • Онлайн предварительный просмотр результата
  • Огромное множество настроек
  • Код громоздкий
  • Красивый интерфейс
  • Легок в использовании
  • Присутствует предварительный просмотр результата
  • Красивый удобный таймер
  • Выбор из нескольких вариантов
  • Прост в использовании
  • Коротенький код
  • Невозможно изменять размера
  • Ограниченное число вариантов
  • Нет возможности редактировать код
  • Много вариантов
  • Удобен для рассылок
  • Основная версия платная
  • При переходе на сайт запускается видео со звуком
  • Требуется регистрация
  • Предварительный просмотр
  • Удобный интерфейс
  • Интуитивно понятные настройки
  • Множество разнообразных настроек под свой вкус
  • Ничего лишнего
  • Короткий код
  • Несколько вариантов дизайна
  • Больших минусов не увидел
  • Несколько вариантов дизайна
  • Ничего лишнего
  • Выбор языка таймера
  • Выбор часового поля
  • Выбор языка интерфейса сервиса
  • Мало настроек
  • Водяной знак на таймере
  • Несколько вариантов дизайна
  • При наведении есть анимация
  • Все на английском языке
  • Не удобный интерфейс
  • Громоздкий код
  • Несколько вариантов дизайна
  • Огромное количество рекламы
  • Некрасивый интерфейс
  • Мало настроек
  • Громоздкий код
  • Присутствует предварительный просмотр
  • Оригинальный дизайн
  • Множество настроек
  • Реклама
  • Неудобные настройки
  • Сложный код

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

1. Codepen.io
2. Sanographix.github.io
3. Flipclockjs.com
4. Lexxus.github.io
5. Keith-wood.name

Если вы обратите свое внимание на сайдбар, то увидите таймер обратного отсчета времени до окончания конкурса. Такой таймер легко реализовать с помощью плагина Easy Timer .

Спасибо за внимание! Напишите в комментариях каким сервисом вы воспользуетесь и для каких нужд? С вами был Владимир Манеров!

Источник

Тест-драйв: 4 сервиса для создания таймера обратного отсчета

Одна из проверенных стратегий, которая стимулирует к целевому действию и повышает продажи — таймер обратного отсчета. Мы подобрали 4 сервиса для создания такого счетчика, протестировали функционал и готовы поделиться плюсами и минусами каждого.

Содержание

Зачем в рассылке таймер обратного отсчета

Создает чувство срочности

Таймер, секунды которого стремительно тикают в обратном направлении, создает чувство срочности и ощущение дефицита времени.

Призывает к немедленному действию

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

Привлекает внимание

Цифры на счетчике меняются в непрерывном режиме — динамическое действие на фоне статичного контента письма цепляет глаз.

Чтобы не осталось сомнений: Selligent и Lynda провели исследование . Выяснилось, что рассылка с таймером приносит 10-процентное увеличение конверсий и 33-процентний рост переходов по сравнению с обычным письмом.

Мы создадим таймер, который будет считать оставшееся время до Нового года. Так что задаем одну и ту же дату окончания события — 31 декабря.

MotionMail

Сервис предназначен исключительно для создания таймеров. Регистрация занимает считанные секунды — кроме имени, фамилии и адреса электронной почты больше ничего не требуется.

Читайте также:  Электронный счетчик для такси

В сервисе доступно 4 тарифа:

  • Free — полностью бесплатный;
  • Bootstrap подходит для маленьких компаний и стоит $10 в месяц;
  • Startup с платой $60 в месяц для начинающих предпринимателей,
  • Enterprise за $200 в месяц — вариант для крупного бизнеса.

В бесплатном тарифе предусмотрено 20 000 кредитов в месяц. Один кредит — один просмотр созданного счетчика. Как только пользователь открывает письмо с таймером — минус кредит. Если один и тот же пользователь открывает письмо, скажем, 5 раз, — минус 5 кредитов со счета. Как оказалось, превью письма с таймером в сервисе рассылок, тоже считается просмотром.

Если у вас остались неиспользованные кредиты за месяц, в тарифе Free и Bootstrap они сгорят, а в тарифах Startup и Enterprise перейдут на следующий месяц. Если кредиты закончились, предусмотрена дополнительная плата за просмотры свыше установленного максимума. Но эта функция доступна только на платных тарифах. Цена за один просмотр варьируется от $0.0001 до $0.000085.

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

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

Интерфейс удобный и понятный, но доступен только на английском языке. Есть 4 разных дизайна. Для таймера можно задать фон, изменить цвет и размер шрифта. Код можно редактировать. Доступен предварительный просмотр таймера, который вы создали.

Чтобы сгенерировать таймер в этом сервисе, глубоких технических знаний не требуется. Достаточно прописать параметры и вставить полученный код в шаблон письма. Респонсивности можно добиться с помощью атрибута со стилевыми свойствами: style=»width:100%; height:auto;» .

Понравившийся вариант счетчика отображается в плохом качестве: отчетливо видны все пиксели вне зависимости от размера. Особенно это заметно, когда вставляешь код в шаблон письма. Попытка узнать, связано ли это с бесплатным тарифом, или неправильными настройками, не принесла результатов. В FAQ ответа на этот вопрос нет, а блог компания не ведет.

Мы попробовали другой вариант оформления и получили таймер в нормальном качестве.

Sendtric

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

Регистрироваться не нужно. Достаточно ввести email, выбрать часовой пояс, затем дату и время события, до которого таймер будет отсчитывать время. Счетчик устанавливается не более чем на 30 дней. Он работает 60-90 секунд, а затем возвращается к началу цикла — времени, которое отображалось при открытии письма. Если подписчик откроет email повторно, таймер снова будет отображать точное время до заданного события.

Вариантов дизайна нет, но есть возможность выбрать цвет фона, текста и самого таймера. Нажимаем кнопку «Generate» и получаем код.

Редактировать код на сайте нельзя, поэтому копируем его в буфер обмена и вставляем в нужный блок шаблона письма. Не забываем про атрибут style с соответствующими значениями width и height, чтобы размер таймера менялся автоматически. Что примечательно — водяной знак под счетчиком отсутствует.

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

Niftyimages

Сервис предназначен для создания персонализированных изображений, таймеров обратного отсчета и ленты социальных сетей в реальном времени для email кампаний. Есть FAQ для каждой категории услуг, компания ведет блог.

В сервисе доступны следующие тарифы:

  • Starter для начинающих. За $20 в месяц вы получаете 50 000 просмотров. Подписка на год стоит $192.
  • Pro для продвинутых пользователей. 250 000 просмотров за $80 в месяц или $768 за подписку на год.
  • Enterprise для больших компаний. 1 миллион просмотров за $250 в месяц, но подписка на год не предусмотрена.
Читайте также:  Условия поверки водяных счетчиков

Есть бесплатная пробная версия, в которой доступно 10 тысяч просмотров — ее мы и будем тестировать.

Первое, что стоит отметить, сервис отнимает просмотры по факту — если получатель увидел таймер, а не просто открыл email. Интерфейс англоязычный, русского адаптированного перевода нет. В пробной версии доступно 6 разных дизайнов.

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

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

Мы обратили внимание, что дни, минуты и секунды указаны в родительном падеже, а часы — в именительном. Поэтому, чтобы избежать разнобоя в склонении, надписи под цифрам лучше убрать.

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

proTimer

Русскоязычный сервис. Чтобы попробовать демо версию, нужно указать имя и электронную почту. Через несколько секунд на почту приходит ссылка на публичный аккаунт в сервисе proTimer, где вы можете самостоятельно протестировать функционал платформы и разобраться, как добавить таймер в рассылку. В догонку приходит письмо от разработчика о том, что счетчик, созданный в демо версии, удаляется спустя 2 часа.

Сервис предоставляет два тарифных плана:

  • Эконом: за 48 рублей пользователь получает 1 таймер в месяц. Сколько таймеров используете — столько раз по 48 рублей и заплатите. В тарифе доступно 15 вариантов дизайна.
  • Безлимитный: за 199 рублей в месяц. Единственное отличие от эконом-тарифа — неограниченное количество таймеров. За указанную сумму вы можете использовать хоть 2 таймера, хоть 20.

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

Во вкладке «Как считать» указываем дату завершения акции и выбираем время.

Переходим к следующей вкладке — «Как отображать». Выбираем подходящий дизайн, устанавливаем размер и цвет фона. Изменение шрифта не предусмотрено. Ненужные цифровые части таймера можно отключить вместе с надписями.

Предварительный просмотр результата отображается в каждой вкладке. В блоке «Как отображать» достаточно много настроек. Превью не помещается в окне и таймер пропадает из поля зрения. Чтобы увидеть, как меняется счетчик, приходится каждый раз прокруткой спускаться вниз страницы. Это не очень удобно.

В последней вкладке, «Настройки для писем», нужно выбрать, что будет отображаться, когда срок действия акции закончится. Есть 5 предложенных сервисом вариантов и возможность вставить URL своей картинки в формате PNG.

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

Когда все параметры указаны, нажимаем кнопку «Вставить таймер в письмо». Платформа начинает генерировать таймер. В нашем случае, процесс занял по меньшей мере 10 минут. Это долго по сравнению с другими сервисами, которые выдают результат моментально. Код, который мы получили, оказался очень громоздким. Стоит отметить, что он вставляется в исходный код письма, а не в визуальный редактор.

Цифры по итогу сбились — вместо положенных 27 дней до 31 декабря отображается 1 день.

Как вставить таймер обратного отсчета в SendPulse

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

  • Создаем новую email кампанию. Выбираем адресную книгу, заполняем «Адрес отправителя», «Имя отправителя», указываем тему сообщения.
  • Выбираем бесплатный шаблон письма из доступных или переходим в HTML-редактор для создания своего шаблона.
  • Добавляем новый текстовый блок. Переходим к исходному коду на вкладке настроек блока. Вставляем код таймера.

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

Источник