Всем привет. Давно уже не писал в блог. Совсем не было времени. Работа, переезд, снова работа. В общем совсем "зашивался" и к вечеру уже не оставалось никаких сил. Когда появлялась минутка, тратил ее на обучение, разбор почты, ответы на сообщения в ВК и т.д., а также на обучение 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.
Всегда актуальная версия скрипта будет находится по адресу:
Кроме того, там расположена инструкция по подключению и демонстрация работы. Если возникнут вопросы, критика и пожелания, смело пишите в комментариях или в форме обратной связи на странице скрипта.
Надеюсь, скоро все устаканится и получится чаще писать в блог. Чтобы ускорить написание какой-то из статей, вы по-прежнему можете предложить тему на этой странице.
35 комментариев
Добрый день! Спасибо большое за создании подобного скрипта.
Начал интеграцию его с сайтом и не могу понять в чем проблема...
Постоянно пишет:" Cannot read property 'appendChild' of null ";
Ошибка возникает на 69 строке ...
Не подскажите в чем проблема?
Здравствуйте, спасибо, что отписали. Только что скачал, попробовал заново подключить - работает. Не могли бы сказать, вносили правки какие-нибудь или настройки какие меняли. Вполне возможно, что я что-то не учел, постараюсь поправить. Для того и выложен в ранней стадии, чтобы находить и исправлять "косяки". Еще раз спасибо.
Вы же в конце подключаете, перед:
Привет, а не хочешь на GitHub выложить?
Я попробовал бы подключить интеграцию с AmoCRM(она уже готова на простой форме) да и вообще, было бы удобно подкидывать какие-то правки.
Да стыдно на GitHub выкладывать) Но интеграция с AmoCRM - было бы круто) Правда я совсем не пользовался ей. Садился, открывал, но так и не доразобрался нормально как связать форму с ней. Ну, точнее с API недоразбирался. Если есть желание, можем гостевую статью оформить, как связать форму с amoCRM, напишешь, расскажешь по шагам, ссылку, если надо, на свой ресурс поставишь) А заодно можно и к скрипту потом приделать.
Стыдиться нечего -) Банально я бы форкнул и попробовал доработать и передавать тебе в репозиторий.
Блога своего нет, так как я не завожу его, незачем.
Кстати, банальная проблема, не могу сделать доп. кнопку. Попробовал, но видимо моих знаний не хватило Оо. Буду благодарен если распишешь как добавить её.
Вот хочу добавить вызов окна callback(не свой, а от сервиса) и amocrm.
По AmoCRM расписывать особо нечего, на гитхабе есть форма с добавлением сделки и контакта, она подключена к простой html форме. Вот на основе виджета, думаю и распишу. Там довольно странная логика) Но работает.
Скинь ссылку пожалуйста. Может руки дойдут, почитаю) А кнопку, ты имеешь ввиду, которая уже в форме "Отправить", или кружечек еще один? Если в форме, то,
в файле smartlid.js, есть объект model в нем методы createCallForm и createRequestForm, каждый из них отвечает за формирование формы.
Сначала создаю кнопку в DOM:
var formBtn = document.createElement('button');Потом помещаю ее в форму:
Задаю класс, title, type и текст:
formBtn.setAttribute('class', 'sl-form--button'); formBtn.setAttribute('title', 'Заявка с сайта'); formBtn.setAttribute('type', 'submit'); formBtn.innerHTML = 'Отправить';И кнопка готова)
А, если круглую, то в методе createButton в цикле добавляю li и в него a
li.setAttribute('class', 'callForm'); a.setAttribute('href', '#sl-overlay-cf');А дальше, если не подключен fontAwesome, то помещаю картинку и даю скласс ссылке:
a.innerHTML = callFormIcon; a.setAttribute('class', 'call-form--link');я просто не планировал больше 3 кнопок выводить и там логика на 3 завязана, чтобы отключая не нужную, остальные нормально работали. Можешь на 3 экспериментировать, там корзина планировалась.
Я как раз про кнопку.
Можно добавить просто 4ю кнопку, которую будет удобно клонировать.
По формам с амо, то вот она https://github.com/aprelkov/form-to-amocrm
Я добавил просто передачу UTM, рефера и хоста с которого форма заполнялась. Ну и по сути у меня 4 лендинга, обработчик формы стоит отдельно а формы подключаются уже к нему, через внешнее подключение.
Я думал использовать как шаблон и подключить например callback от сервисов. Банально скрывая их кнопку через display:none -)
Да, чую возьму корзину на растерзание.
в CRM Flowlu.ru с подключением веб-форм чутка проще:
1. Заходим в Настройки, выбираем пример формы которая нравится http://joxi.ru/xAeeowvHObePAy
2. Вставляем HTML код в любое место, готово.
Если надо подправить набор инпутов под свои нужды:
1. Просто в приведенном HTML коде добавляете инпуты, информация из них будет записываться в детальное описание лида. Никаких дополнительных настроек не нужно.
2. В форме есть встроенная защита от СпамБотов(простая конечно, но работает как часы). В HTML коде присутствует <textarea name="nspm" скрытая CSS стилем. Обычно спам боты заполняют все поля. Система смотрит если скрытое поле nspm чем-то заполнено, значит это 100% спам, т.к. пользователь бы не смог заполнить данное поле.
банальный вопрос. как сделать чтобы форма закрывалась при нажатии на не активную зону и после отправки сообщения? Сейчас пока на крестик не нажмешь окно не уходит
Добрый день, спасибо за данный скрипт. Если Вас не затруднит, подскажите как реализовать что бы форма закрывалась при нажатии на не активную зону и автоматически после вывода сообщения"об успешной отправки сообщения" через 5 секунд?
Привет, пригодился как раз скрипт снова)
Но вот то что нет закрытия по клику в пустоту не радует. Сможешь приделать?
Дима, скрипт просто супер, молодец! А вот по поводу закрытия в неактивной зоне поддерживаю прежних комментаторов!
Скоро будет обновление, там учту многие пожелания
Как подключить к Вордпрессу?
Положить в корень сайта папку smartlid, и вызвать как в инструкции, думаю, никаких отличий быть не должно.
Разобрался с главным. А как теперь создать ссылку для вызова виджета из любого места на сайте?
Добрый день.
Спасибо Большое за скрипт. Выручает постоянно.
Только вот столкнулся с проблемой. Если не подключать свои кнопки для вызова модал. окон, а использовать те что по умолчанию, то на мобильном, кнопка какая то полурабочая. Надо нажимать на экране в правый нижний край кнопки, чтобы она сработала. Можно ли как то исправить данный баг? Чтобы кнопка работала при нажатии на любую её область.
Добрый вечер Дмитрий.
Есть вопрос: Как добавить в SmartLid поле select?
Например: Поле выбора времени для звонка.
Соответственно с передачей выбранного на почту.
Огромная благодарность за скрипт. Очень помогает.
Ответил в вк!
Дмитрий, добрый день! Спасибо за Вашу работу. Столкнулся лишь с одной проблемой, не отправляет данны сразу на несколько адресов, а тольок на один. В чем может быть проблема? Заранее спасибо.
Андрей, здравствуйте, а вы пробуете через smtp или без него?
Здравствуйте. Добавляю скрипт в корень сайта в папку smartlid, подключаю в индексном файле, в файле config.php заполнил строки SMTP-YANDEX, SENDER, CATCHER. На сайте заполняю форму жму отправить, пишет письмо отправляется и ничего дальше не происходит. В консоли при этом ошибка 500.
Дмитрий, вот это все заполнили, и у вас 500 ошибка? Точно в логине и пароле не ошиблись? Пробовали другие почты?
Проблему решил повышением версии PHP с 5.2 до 5.6 и изменением библиотеки jquery на 3.3.1
Отлично, спасибо, что отписал. Я просто даже не тестировал на < php5.6, думал уже никто и не пользуется этой версией
Дмитрий, подскажите, как подключить передачу title например, при заказе обратного звонка. Чтобы понимать на какой странице был сделан заказ звонка.
Очень не хватает такой возможности. Буду крайне признателен за подсказку.
Привет. Можно так решить поставленную задачу!
Я понял, что передать параметр можно, но я пытаюсь сделать реализацию именно на smartlid, а там нет html формы, вернее она выводится с помощью JS.
Поэтому и прошу помочь разобраться с этим именно в ключе данного скрипта SmartLid.
По аналогии с тем, как создаются поля для имени или комментария, создать поле для URL. Затем передать в него нужный параметр. После этого в php-обработчике нужно будет обработать это поле, опять таки, по аналогии с тем, что уже есть.
Дмитрий, сделайте пожалуйста, после отправки данных с форм, возможность перехода на страницу благодарности (ссылку)