Albero-kuhni.ru

Доходы и заработок
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Скрипт обратного звонка бесплатно

Callme 2.5

Один из самых популярных скриптов обратной связи в мире

Настраивайте обратную связь с клиентами легко и удобно для всех

После 6 успешных лет на рынке и более чем 20.000 довольных клиентов мы знаем, как превращать посетителей в покупателей

Универсальный

Виджет обратного звонка работает как на самом простом HTML-сайте, так и на любой панели управления: Joomla, Prestashop, Bitrix, WordPress, Opencart, Webasyst, ModX и множестве других

Адаптивный

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

Любое количество получателей

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

СМС-уведомления

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

Множество форм

Используйте на каждой странице столько разных форм, сколько захотите

Встроенные формы заказа

Форма может быть не только в попапе. Любая созданная вами на странице форма может обрабатываться Callme. Всё, что вам нужно — добавить пару атрибутов и форма заработает автоматически

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

  • Форма обратной связи со всеми возможными полями
  • Защита проверкой (captcha)
  • 2 обязательных поля
  • Дизайн по умолчанию
  • С лицензией

Показать

  • Форма, прикрепленная к левому или правому краю
  • 2 поля: имя и телефонный номер
  • Оба поля обязательны
  • Поле с телефоном имеет маску ввода
  • Без лицензии
  • Минималистическая форма заказа
  • Шаблон yellow
  • Поле с телефоном без маски
  • Приветственный текст над полями
  • Без лицензии

Показать

Шаблоны оформления

В скрипте есть 7 предустановленных шаблонов дизайна, которые можно менять за два клика. Чтобы выбрать другой шаблон, просто поменяйте переменную: cme_template

Вы также можете создать свой шаблон оформления, для этого вам достаточно отредактировать CSS-файл со стилями и вы получите свой уникальный дизайн!

  • Apple (в стиле Apple)
  • Default (шаблон по умолчанию, самый крутой)
  • black red (чёрный и красный)
  • ВК (цвета Вконтакте)
  • FB (цвета Facebook)
  • Pink (розовый)
  • Yellow (жёлтый)

Посмотрите все шаблоны дизайна в действии на демо-странице.

Настройка формы

Смотрите, как настроить форму:

СМС, почта, SMTP

Серверная часть настраивается ещё проще:

Лицензия

Есть две верси скрипта: бесплатная версия и премиум.

Если вам не хочется платить, бесплатная версия — ваш выбор.

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

Нужна помощь?

Если нет времени на настройку и установку Callme, вы всегда можете заказать эту услугу у нас.

Настройки по умолчанию хранятся в файле /config/main.js . В любом случае,Callme поддерживает любое колчество файлов с настройками на одной странице. Все конфиги хранятся в папке /config . Это обыкновенные json-файлы, которые можно редактировать в любом текстовом редакторе. Смотрите документацию, чтобы узнать больше.

Callme использует библиотеку Masked input (Josh Bush), за что спасибо автору. Сайт плагина

SmartLid — скрипт обратного звонка

SmartLid — это бесплатный скрипт обратного звонка (контактная форма, которая вызывается при клике на кнопку и достаточно легко подключается к любому сайту).

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

Версия: 0.09 / 17.12.18

Если вам нравится скрипт, и он решает ваши задачи, можете поддержать проект

17.12.18 — Что нового?

Добавлена возможность автооткрытия окна через заданное время. Для этого нужно править 3 опции.

//** Выбор формы для автооткрытия:

//— ‘callForm’ — автооткрытие формы обратного звонка

//— ‘requestForm’ — автооткрытие формы c отправкой сообщения

//— false — выключить автооткрытие | без ковычек

Читать еще:  Как зарабатывать криптовалюту без вложений отзывы

//** Время, через которое откроется модальое окно с формой, после загрузки страницы (в милличекундах). Минимум 3 секунды.

//** Время (в часах), сколько окно не будет показываться, после первого показа или самостоятельного открытия окна пользователем.

То есть механизм такой, что мы задаем в миллисекундах, через какое время должна открыться форма. Параметр — autoOpenTime. Затем в параметре autoOpenForm задаем какая именно форма должна быть в модальном окне. Параметр autoOpenPeriodicity указывает на то, через сколько окно покажется пользователю снова, если он зайдет на сайт еще раз.

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

13.11.18 — Что нового?

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

// ** Отключить пульсирующие кнопки и оставить вызов модального окна только своими ссылками smartlid_visible | smartlid_hidden

30.10.18 — Что нового?

Добавлена возможность выводить сразу нужную кнопку, минуя лишний клик по «бутерброду». То есть, если вам нужна только 1 кнопка с вызовом модального окна, больше нет необходимость кликать по кнопке с «меню». Никаких дополнительных настроек задавать нет необходимости, просто ненужному окну задайте «false»

Исправлены ошибки при работе на многостраничных сайтах. Теперь пути прописаны правильно

Что представляет из себя SmartLid.js?

На данный момент smartlid.js — это кнопка, в левом/правом нижнем углу экрана, при нажатии на которую появляется 2 дополнительные кнопки с иконками телефона и конверта. При клике на одну из них, в модальном окне появляется соответствующая форма (форма для заказа обратного звонка, и форма для отправки сообщения или заявки). Выглядит это следующим образом:

Как подключить Smartlid.js к своему сайту?

Чтобы подключить SmartLid.js к своему сайту, достаточно скачать и распаковать архив в корень вашего сайта. В результате у вас появится папка smartlid.

После этого необходимо подключить и инициализировать скрипт. Я рекомендую делать это в перед закрывающим тегом body, то есть в самом конце страницы.

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

Настройки внешнего вида

Настройки, которые помогут оформить внешний вид и валидацию на стороне клиента. Сам скрипт находится по пути /smartlid/smartlid.js. Там же расположены и настройки по умолчанию. В принципе, можно реадктировать их прямо там. Но чтобы ничего не испортить, лучше прописывать свои настройки при подключении скрипта.

Общие настройки

Настройки автооткрытия формы

Настройка формы обратного звонка

Вызов формы своей кнопкой или ссылкой

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

Настройки отправки формы

Давайте настроим отправку формы на ваш почтовый адрес. Делается это в файле config.php

Найти его можно по такому пути: /smartlid/php/config.php

Основные настройки для отправки письма:

Если планируете использовать SMTP, придется заполнить несколько переменных.

  • const HOST — хост;
  • const LOGIN — логин почты, с которой отправляется письмо;
  • const PASS — пароль почты, с которой отправляется письмо;
  • const PORT — порт;

Обратите внимание на то, что константу LOGIN для Яндекс и Mail почты следует заполнять по-разному

В случае с Яндекс почтой, нужно указать только логин, без @yandex.ru, а в случае с Mail нужно указывать полный почтовый адрес, то есть sender@mail.ru

Если используете Gmail или любую другую почту, просто загуглите «gmail smtp» или обратитесь к своему поставщику услуг, который подскажет нужные данные.

Кроме того, заполните эти константы:

  • const SENDER — адрес, с которого отправляется письмо;
  • const CATCHER — почтовый адрес, на который будут приходить письма;
Читать еще:  Биржа сбербанк онлайн

Если не используете SMTP, то просто укажитесвою почту в константах SENDER и CATCHER

  • const SENDER — адрес, с которого отправляется письмо;
  • const CATCHER — почтовый адрес, на который будут приходить письма;
  • const CATCHER2 — дополнительный почтовый адрес, на который будут приходить письма;
  • const SUBJECT — заголовок письма;
  • const CHARSET — кодировка;

Валидация на стороне сервера

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

  • $nameIsRequired — обязательно ли поле с именем для заполнения true / false;
  • $telIsRequired — обязательно ли поле с телефоном для заполнения true / false;
  • $emailIsRequired — обязателен ли email — true / false;

Круглая кнопка (обратного звонка) CSS с анимацией

Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».

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

Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.

Кнопка заказа звонка

Кнопка обратной связи

Как видите, все очень просто. Удачной реализации, уважаемый читатель!

Читайте также:

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

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

День добрый. Какой скрипт? Что значит «мертвые»? Каким образом указываете ссылку?

Андрей, не удивляйтесь моей терминологии, я гуманитарий, я не спец в компьютерах. Я пытаюсь добавить Ваши кнопки в шаблон Bootstrep и прикрепить к ним форму обратной связи и прямой звонок на телефон. Я добавила Ваши кнопки на сайт. Они очень красивые, но как их активировать и что-то прикрепить к ним, я не знаю. Объясните, пожалуйста, для таких, как я (которые в танке и в каске).

Прямой звонок. ссылку на номер? Вот так:

А модальное окно. просто добавьте тот класс или id к кнопке, который должен вызывать модальное окно.

Здравствуйте, WordSmall! Спасибо, поставил на свой сайт кнопку заказа обратного звонка по инструкции выше. Но у меня проблемка: в примере Вашем вверху страницы на голубом фоне кружочек с трубочкой в центре, создав же на сайте HTML и CSS, я получил кружочек с диковинным прямоугольничком в центре. Прошу пояснить, как мне получить желанную телефонную трубку? Спасибо Вам!

День добрый. В статье сказано «В качестве иконок используем всем известный шрифт Font Awesome. » и в комментариях говорилось.

Здравствуйте ещё раз! Да, всё оказалось проще, чем я думал. Использовав , поменял внешний вид кнопки на возжеланную телефонную трубку. Осталась вторая проблема и буду весьма признателен, если намекнёте на её решение. Но спасибо в любом случае, разумеется.

Итак, в чём сложность: ваяя свой сайт в Gridbox’е, хочу сделать так, чтоб по клику на любезно предоставленную Вами кнопку открывалась форма. Для этого использую Overlay section, сложность в том, что привязать существующую форму вроде как могу лишь либо к картинке, либо к иконке — судя по опциям Overlay section. А вот как форму привязать к Вашей кнопке-то? Не соображу. Не посоветуете ли чего, добрый человек?

Читать еще:  Инвестирование в криптовалюту

Callme 2.0

Самый популярный скрипт обратного звонка рунета

Простой

Скрипт предельно прост в установке и работе. Установка займет менее 10 минут.

Универсальный

Работает на любой платформе: Joomla, Prestashop, Bitrix, WordPress, Opencart, Webasyst, ModX и любых других, где есть доступ к FTP.

Удобный

Уведомления приходят на e-mail и в СМС. В комплекте шаблоны настроек для 5 самых популярных смс-провайдеров и SMTP-настройка.

Популярный

Запущен в 2011-м и работает на нескольких тысячах сайтах.

Пример

Давайте посмотрим, как работает Callme. Нажмите на любую из ссылок ниже. Кликайте на любую ссылку, чтобы показать форму заказа. Вообще на любую. Кликайте на любую из них повторно, чтобы форма скрылась.

Все очень просто: любому объекту, который должен по клику показывать или скрывать форму, добавляйте аргумент: class=»callme_viewform»

Шаблоны

В комплекте 6 различных скинов, которые меняются при помощи CSS. Чтобы выбрать другой шаблон, меняйте переменную cme_template .

Настройка

Все настройки указываются в файле /callme/js/config.js . Чтобы изменить поля, которые появляются в форме, укажите их названия в переменной cme_fields через запятую. Для того, чтобы поле было не просто текстовым, а textarea , перед его именем добавьте минус.

Все параметры указываются как свойства объекта cmeData в формате «имя свойства»: «значение» и разделенные запятыми. Если это звучит сложно, не расстраивайтесь, ниже есть пример, в котором все понятно.

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

Название поля может отличаться от параметра placeholder . Чтобы указать, какой текст будет использоваться в качестве placeholder, укажите его в скобках после названия поля. Этот параметр будет действовать и для текстовых полей, и для текстовых блоков (textarea).

Например: Имя(Укажите имя) , -Ваш вопрос (Опишите суть вопроса)

Этот код — значение по умолчанию, которое сохраняется в файле callme/js/config.js . Чтобы все работало, достаточно не трогать его. Если хотите менять значения, пользуйтесь таблицей выше. Если что-то пошло не так, скопируйте этот код и замените им то, что получилось у вас.

Напоминаю: настройки должны быть сохранены в файле cellme/js/config.js .

Подключение

Обратите внимание: если вы обновляете более старую версию Callme, вам нужно будет удалить её код и установить заново. Это несложно, тем не менее, код придётся обновить.

О том, как настраивать sms, написано здесь: настройка СМС в Buyme и Callme.

Скачивайте архив (ссылка ниже), распаковывайте его в корневую папку callme . Открывайте в Notepad++ или Sublime Text (не блокноте) файл /callme/lib/send.php и меняйте почту на свою. Если отправка почты не работает или у вас есть лишнее время, вы можете подключить отправку почты через SMTP. Данные указывайте в файле callme/lib/smtp.php .

Установка скрипта производится так: перед закрывающимся тегом добавляем такой код:

Лицензия

Чтобы убрать копирайт, нужно купить лицензию. Это стоит не менее 7$ на ваше усмотрение. Реквизиты указаны на странице с лицензиями. Оплачиваете и заполняете форму на этом сайте, а я в ответ отправляю вам ключ для скрипта. Все посто.

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

Помощь

Если что-то не получается, вы можете заказать у меня установку скрипта на любую CMS. Также разрабатываю другие скрипты на заказ, верстаю. Заинтересован в постоянном удаленном сотрудничестве.

Ссылка на основную публикацию
Adblock
detector