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

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

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

Актуальная версия SmartLid 0.03

Скачать: Smartlid
Скачано: 141, размер: 10.9 KB, дата: 05.Ноя.2016

Кроме того, захотелось углубится в изучение javascript. А на реальном проекте это делать гораздо интереснее. По мере изучения, скрипт будет постоянно улучшаться и совершенствоваться. Если есть пожелания, критика и рекомендации, буду рад услышать ваше мнение в комментариях.

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

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

Посмотреть пример

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

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

После этого, между тегами head необходимо подключить таблицу стилей:

<!-- Таблица стилей smartlid-->
<link href="smartlid/css/style.css" type="text/css" rel="stylesheet">

А ниже и сам скрипт.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22smartlid%2Fsmartlid.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

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

Теперь, нужно указать адрес почты, на который будет приходить письмо. Делается это в файле mail.php, который находится по пути smartlid/php/mail.php. Ищем строки:

$to = "smart-landing@yandex.ru"; /*Укажите адрес, на который должно приходить письмо*/
$sendfrom = "smartsupport@yandex.ru"; /*Укажите адрес, с которого будет приходить письмо */

И меняем адреса, на свои.

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

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

После описанных выше действий, скрипт готов к использованию, осталось только указать свою почту в настройках.

Каким функционалом будет обладать скрипт?

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

  • Подключение до 3 кнопок.
  • Выбор, между использованием иконического шрифта FontAwesome или svg, png, jpg иконками.
  • Редактирование placeholder у полей.
  • Редактирование заголовков форм.
  • Редактирование иконок форм и кнопок, вызывающих форму.
  • Возможность вызова формы своей ссылкой, расположенной в любом месте на сайте.
  • Получение в письме ссылки на источник, с которого пришел человек и оставил заявку
  • Возможность сделать поля обязательными для заполнения на стороне клиента.
  • 3 положения основной кнопки.
  • Настройка внешнего вида (несколько тем оформления).
  • Возможность подключения reCaptcha.
  • Передача utm меток.
  • Передача в сообщении города пользователя.
  • Настройка цели для Метрики.
  • Передача файла.
  • Отправка письма на несколько адресов.
  • Автоматическая отправка письма пользователю.
  • Редактирование сообщения текста об успешной отправке.
  • Автоматическое всплывание формы, через время.
  • Возможность подключения своих форм.
  • Связь с CRM Битрикс 24.
  • Подключение простой корзины для сайта.

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

Какие настройки доступны в SmartLid.js и как ими пользоваться?

Все настройки расположены в файле smartlid.js. В самом начале:

// Опции

    // Подключен ли к сайту fontawesome - иконический шрифт. Если нет, то будут выводиться обычные картинки.
    // true - подключен, false - не подключен
    var fontAwesome = true;

    // Путь к картинкам, если не подулючен к сайту fontawesome
    if (!fontAwesome) {
        var callFormIcon = '<img src="smartlid/img/phone.svg" height="16">';
        var requestFormIcon = '<img src="smartlid/img/envelope.svg" height="16">';
        var basketFormIcon = '<img src="smartlid/img/phone.svg" height="16">';
    }

    // Подключение формы обратного звонка
    // true - выводить формы, false - не выводить
    var callForm = true;

    // Подключение формы с возможностью отправить сообщение
    // true - выводить формы, false - не выводить
    var requestForm = true;

    // Подключение корзины к landing page (пока не реализовано)
    // true - выводить формы, false - не выводить
    var basketForm = false;

    // Внешний вид форм (стилевое оформление) -- 'dark-space'
    var styleForm = 'dark-space';

    // Заголовок формы для заказа обратного звонка
    var callFormTitle = "Закажите обратный звонок, и наш консультант свяжется с вами";
    // Путь к иконке формы для заказа обратного звонка
    var callFormImg = '<img src="smartlid/img/call.svg">';

    // Заголовок формы для отправки заявки (сообщения)
    var requestFormTitle = "Оставьте заявку, и наш консультант свяжется с вами";
    // Путь к иконке формы для отправки заявки (сообщения)
    var requestFormImg = '<img src="smartlid/img/mail.svg">';

    // Заголовок формы с корзиной покупок (не реализовано)
    //var basketFormTitle = "Корзина";

    // placeholder для ввода имени
    var placeHolderName = "Введите ваше имя";

    //Обязательно ли поле с именем для заполнения? true - да, false - нет;
    var requiredName = true;

    // placeholder для ввода телефона
    var placeHolderTel = "Введите ваш телефон";

    //Обязательно ли поле с телефоном для заполнения? true - да, false - нет;
    var requiredTel = true;

    // placeholder для ввода почты
    var placeHolderMail = "Введите ваш email";

    //Обязательно ли поле с вводом почты для заполнения? true - да, false - нет;
    var requiredMail = true;

    // placeholder для ввода сообщения
    var placeHolderText = "Введите сообщение";
    //Обязательно ли поле с вводом текста/комментарием для заполнения? true - да, false - нет;
    var requiredText = false;

    // Конец настроек

Вызов формы своей ссылкой, расположенной в любом месте на сайте

Для вызова формы при помощи своей ссылки, расположенной на сайте задайте атрибуту href:

  • <a href="#sl-overlay-cf">Обратный звонок</a>

    - для вызова модального окна с формой обратного звонка

  • <a href="#sl-overlay-rf">Заявка</a>

    - для вызова модального окна с формой заявки

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

Оставить отзыв, критику, пожелания

Ваше имя (обязательно)

Ваш e-mail

Комментарий, пожелание, замечание, критика