Smartlanding

SmartLid — скрипт обратного звонка для сайта

smartlidВсем привет. Давно уже не писал в блог. Совсем не было времени. Работа, переезд, снова работа. В общем совсем «зашивался» и к вечеру уже не оставалось никаких сил. Когда появлялась минутка, тратил ее на обучение, разбор почты, ответы на сообщения в ВК и т.д., а также на обучение js.

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

  • Обратный звонок
  • Контактная форма
  • Корзина

И другие элементы, которые могут использоваться на landing page и влиять на конверсию. Вот не полный список возможностей для контактных форм, которых планирую реализовать:

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

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

Почему я решил сделать SmartLid?

Мне показалось, что подобные скрипты довольно популярны, так как нашел несколько готовых и успешно используемых инструментов. Например, callme.js. Кроме того, недавно писал статью о корзине для Landing page, которую сделал один парень и выложил в сеть. Так вот, оказалось, что файлы отвечающие за отправку письма лежат у него на сервере. И сам был свидетелем того, что сайт у него упал больше чем на сутки, и все пользователи не могли принять заказы. Для кого-то эта ситуация могла стоить неплохих денег. Я, в сою очередь, планирую сделать скрипт, в который будет полностью находится на вашем сервере и подобных ситуаций возникать не будет.

К версии 1.0 надеюсь сделать полноценный инструмент для повышения конверсии на landing page, поэтому и назвал скрипт — SmartLid.

Всегда актуальная версия скрипта будет находится по адресу:

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

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

21 комментарий

  • Олег

    Добрый день! Спасибо большое за создании подобного скрипта.
    Начал интеграцию его с сайтом и не могу понять в чем проблема…
    Постоянно пишет:» Cannot read property 'appendChild' of null «;
    Ошибка возникает на 69 строке …
    Не подскажите в чем проблема?

    Ответить
  • dimadv7

    Здравствуйте, спасибо, что отписали. Только что скачал, попробовал заново подключить — работает. Не могли бы сказать, вносили правки какие-нибудь или настройки какие меняли. Вполне возможно, что я что-то не учел, постараюсь поправить. Для того и выложен в ранней стадии, чтобы находить и исправлять «косяки». Еще раз спасибо.

    Вы же в конце подключаете, перед:

    </body>
    Ответить
  • GwynnBleiidd

    Привет, а не хочешь на GitHub выложить?
    Я попробовал бы подключить интеграцию с AmoCRM(она уже готова на простой форме) да и вообще, было бы удобно подкидывать какие-то правки.

    Ответить
  • dimadv7

    Да стыдно на GitHub выкладывать) Но интеграция с AmoCRM — было бы круто) Правда я совсем не пользовался ей. Садился, открывал, но так и не доразобрался нормально как связать форму с ней. Ну, точнее с API недоразбирался. Если есть желание, можем гостевую статью оформить, как связать форму с amoCRM, напишешь, расскажешь по шагам, ссылку, если надо, на свой ресурс поставишь) А заодно можно и к скрипту потом приделать.

    Ответить
  • GwynnBleiidd

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

    Кстати, банальная проблема, не могу сделать доп. кнопку. Попробовал, но видимо моих знаний не хватило Оо. Буду благодарен если распишешь как добавить её.

    Вот хочу добавить вызов окна callback(не свой, а от сервиса) и amocrm.

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

    Ответить
  • dimadv7

    Скинь ссылку пожалуйста. Может руки дойдут, почитаю) А кнопку, ты имеешь ввиду, которая уже в форме «Отправить», или кружечек еще один? Если в форме, то,
    в файле smartlid.js, есть объект model в нем методы createCallForm и createRequestForm, каждый из них отвечает за формирование формы.
    Сначала создаю кнопку в DOM:

    var formBtn = document.createElement('button');
    

    Потом помещаю ее в форму:

    form.appendChild(formBtn);
    

    Задаю класс, title, type и текст:

    formBtn.setAttribute('class', 'sl-form--button');
    formBtn.setAttribute('title', 'Заявка с сайта');
    formBtn.setAttribute('type', 'submit');
    formBtn.innerHTML = 'Отправить';
    

    И кнопка готова)

    Ответить
  • GwynnBleiidd

    Я как раз про кнопку.
    Можно добавить просто 4ю кнопку, которую будет удобно клонировать.

    По формам с амо, то вот она https://github.com/aprelkov/form-to-amocrm
    Я добавил просто передачу UTM, рефера и хоста с которого форма заполнялась. Ну и по сути у меня 4 лендинга, обработчик формы стоит отдельно а формы подключаются уже к нему, через внешнее подключение.

    Ответить
  • dimadv7

    А, если круглую, то в методе createButton в цикле добавляю li и в него a

    li.setAttribute('class', 'callForm');
    a.setAttribute('href', '#sl-overlay-cf');
    

    А дальше, если не подключен fontAwesome, то помещаю картинку и даю скласс ссылке:

    a.innerHTML = callFormIcon;
    a.setAttribute('class', 'call-form--link');
    
    Ответить
  • dimadv7

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

    Ответить
  • GwynnBleiidd

    Я думал использовать как шаблон и подключить например callback от сервисов. Банально скрывая их кнопку через display:none -)

    Да, чую возьму корзину на растерзание.

    Ответить
  • Алексей

    в CRM Flowlu.ru с подключением веб-форм чутка проще:
    1. Заходим в Настройки, выбираем пример формы которая нравится http://joxi.ru/xAeeowvHObePAy
    2. Вставляем HTML код в любое место, готово.

    Если надо подправить набор инпутов под свои нужды:
    1. Просто в приведенном HTML коде добавляете инпуты, информация из них будет записываться в детальное описание лида. Никаких дополнительных настроек не нужно.

    2. В форме есть встроенная защита от СпамБотов(простая конечно, но работает как часы). В HTML коде присутствует <textarea name="nspm" скрытая CSS стилем. Обычно спам боты заполняют все поля. Система смотрит если скрытое поле nspm чем-то заполнено, значит это 100% спам, т.к. пользователь бы не смог заполнить данное поле.

    Ответить
  • Денис

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

    Ответить
  • Данила

    Добрый день, спасибо за данный скрипт. Если Вас не затруднит, подскажите как реализовать что бы форма закрывалась при нажатии на не активную зону и автоматически после вывода сообщения»об успешной отправки сообщения» через 5 секунд?

    Ответить
  • GwynnBleiidd

    Привет, пригодился как раз скрипт снова)
    Но вот то что нет закрытия по клику в пустоту не радует. Сможешь приделать?

    Ответить
  • Игорь

    Дима, скрипт просто супер, молодец! А вот по поводу закрытия в неактивной зоне поддерживаю прежних комментаторов!

    Ответить
  • dimadv7

    Скоро будет обновление, там учту многие пожелания

    Ответить
  • Андрей

    Как подключить к Вордпрессу?

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

    Разобрался с главным. А как теперь создать ссылку для вызова виджета из любого места на сайте?

    Ответить
  • dimadv7
    <!-- smartlid__call-button_custom - для вызова формы обратного звонка -->
    <button class="smartlid__call-button_custom">Звонок</button>
    
    <!-- smartlid__call-button_custom - для вызова формы с фозожностью отправить сообщение -->
    <button class="smartlid__request-button_custom">Сообщение</button>
    
    Ответить
  • Леонид

    Добрый день.
    Спасибо Большое за скрипт. Выручает постоянно.
    Только вот столкнулся с проблемой. Если не подключать свои кнопки для вызова модал. окон, а использовать те что по умолчанию, то на мобильном, кнопка какая то полурабочая. Надо нажимать на экране в правый нижний край кнопки, чтобы она сработала. Можно ли как то исправить данный баг? Чтобы кнопка работала при нажатии на любую её область.

    Ответить

Добавить комментарий

Поделитесь статьей в социальных сетях, чтобы не потерять