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

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

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

smartlid.zip

Размер: 651 кб

Версия: 0.09 / 17.12.18

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

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

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

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

//--- 'callForm' - автооткрытие формы обратного звонка

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

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

 

autoOpenForm: false,

 

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

 

autoOpenTime: '9000',

 

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

 

autoOpenPeriodicity: '1',

 

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

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

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

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

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

isSmartlidVisible: 'smartlid_visible'

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

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

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

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

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

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

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

Структура проекта

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

Инициализация скрипта smartlid

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

    
    $(function ($) {
        $.getScript('./smartlid/smartlid.js', function () {
            $('body').smartLid({

            });
        });

        function addStyle(href) {
            elem = document.createElement("link");
            elem.href = href;
            elem.rel = 'stylesheet';
            document.head.appendChild(elem);
        }
        addStyle('./smartlid/css/main.css');
    }(jQuery));
                    
                    

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

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

            
  $(function ($) {
    $.getScript('./smartlid/smartlid.js', function () {
      $('body').smartLid({
        

        //Настройки
        requestForm: true,
        placeholderName: 'Введите ваше имя',
        callFormAddFile: true,
        requestFormAddFile: true,


      });
    });

    function addStyle(href) {
      elem = document.createElement("link");
      elem.href = href;
      elem.rel = 'stylesheet';
      document.head.appendChild(elem);
    }
    addStyle('./smartlid/css/main.css');
  }(jQuery));
          
          

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

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

//** Включить форму обратного звонка? true|false
callForm: true,

//** Включить форму c отправкой сообщения? true|false
requestForm: true,

// ** Расположение кнопок: smartlid_left | smartlid_right
position: ' smartlid_left',

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

//** Отслеживание заполнение формы в целях Яндекс Метрики. 
// XXXXXX - код счеткичка в Метрике
// SMARTLID - ID цели

counter: function () {
      yaCounter40976409.reachGoal('SMARTLID');
},

//** Стиливое оформление формы 'dark-space', вскоре появятся и другие цвета
styleForm: ' dark-space',

//** Иконка главной кнопки, которая вызывает другие кнопки
navBtnIcon: '',

//** Иконка кнопки, которая вызывает модальное окно с формой обратного звонка
callFormBtnIcon: '',

//** Иконка кнопки, которая вызывает модальное окно с формой отправки сообщения
requestFormBtnIcon: '',

//** Placeholder для полей
placeholderName: 'Введите ваше имя',
placeholderPhone: 'Введите ваш телефон',
placeholderMail: 'Введите ваш email',
placeholderText: 'Введите ваше сообщение',

//** Checkbox согласия с разрешением на обработку персональных данных true|false
agreement: false,

//** Должен ли быть отмечен checkbox с разрешением на обработку 
//** персональных данных по умолчанию? true|false
agreementIsActive: false,

//** Cсылка на лицензионное соглашение
agreementLink: '#',


            
          

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

            
    //******************************* Настройка автооткрытие формы *******************************

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

    //--- 'callForm' - автооткрытие формы обратного звонка
    //--- 'requestForm' - автооткрытие формы c отправкой сообщения
    //--- false - выключить автооткрытие | без ковычек

    autoOpenForm: false,

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


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

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

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

//** Заголовок формы
callFormTitle: 'Оставьте ваш номер телефона, и наш консультант свяжется с вами',

//** Текст кнопки отправляющей форму
buttonTextCallForm: 'Отправить',

//** Картинка в модальном окне
callFormIcon: './smartlid/img/call.svg',

//** Включить поле с отправкой файла? true | false
callFormAddFile: true,
        
        
            
//***** Настройка формы с возможностью отправить сообщение *****//

//** Заголовок формы
requestFormTitle: 'Оставьте сообщение, и наш консультант свяжется с вами',

//** Текст кнопки отправляющей форму
buttonTextRequestForm: 'Отправить',

//** Картинка в модальном окне с формой отправки заявки
requestFormIcon: './smartlid/img/mail.svg',

//** Включить поле с отправкой файла? true | false
requestFormAddFile: true,

//** Включить поле с вводом телефона? true | false
requestFormTelInput: false,
              
              

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

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

            





            
          

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

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

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

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


// Основные настройки для отправки письма
     
    // *********** Если планируете использовать SMTP

    // ** Пример для SMTP-YANDEX.
    // const HOST = 'ssl://smtp.yandex.ru';
    // const LOGIN = 'dima.d.v';
    // const PASS = '03049192z';
    // const PORT = 465;


    /// ** Пример для SMTP-MAIL.RU
    // const HOST = 'ssl://smtp.mail.ru';
    // const LOGIN = 'sender@mail.ru';
    // const PASS = 'XXXXXXXXX';
    // const PORT = 465;

    
    // ** Раскомментируйте (уберите слеши) и заполните данные, как в примере выше

    // const HOST = '';
    // const LOGIN = '';
    // const PASS = '';
    // const PORT = '';
    // require_once($_SERVER['DOCUMENT_ROOT'] . '/smartlid/demo/smartlid/php/phpmailer/smtp.php');


// Дополнительные настройки 
    const SENDER = 'sender@yandex.ru';
    const CATCHER = 'catcher2@yandex.ru';
    const CATCHER2 = 'catcher2@list.ru';
    const SUBJECT = 'Заявка с сайта';
    const SUCCESSMSGS = 'Спасибо за обращение. Сообщение успешно отправлено';
    const FAILMSGS = 'Сообщение не отправлено, попробуйте еще раз';
    const FAILFILE = 'Ошибка отправки файла, попробуйте еще раз';
    const ATTENTION = 'Внимание! Вы заполнили не все обязательные поля';
    const AGREMENTATTANTION = 'Вы не приняли условия пользовательского соглашения';
    const CHARSET = 'UTF-8';

    $nameIsRequired = false;
    $telIsRequired = true;
    $emailIsRequired = true;
    // $textIsRequired = false; - пока не работает
            
          

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

Если планируете использовать 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;

План развития скрипта

Тест