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 (формы, корзина, аналог стадного инстинкта, как у callbackkiller), поэтому и назвал скрипт - SmartLid.

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 10

  1. Олег

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

    • dimadv7

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

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

      </body>
  2. GwynnBleiidd

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

  3. 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 = 'Отправить';
      

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

    • 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

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

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

    • GwynnBleiidd

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

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

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