Обратный звонок Callback. Виджет для сайта

Бесплатный

без ограничений по времени

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

Возможности версии

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

• возможность изменения внешнего вида. Вы сможете поменять дизайн в соответствии с собственными предпочтениями и оформлением вашего сайта;
• многоязычность. Вы сможете качественно обслуживать и отвечать на вопросы как русскоговорящей, так и иноязычной аудитории;
• получение отчетности. Консультанты могут узнать, отправлено ли сообщение и получено ли оно пользователем;
• офф-лайн форма обратной связи. Если пользователь принял решение о сотрудничестве с вашей фирмой во внерабочее время, для оформления заказа ему автоматически будет предложено специализированное окно;
• автосмена статуса оператора. Позволит понять пользователю активность оператора во время общения, а руководству — оценить эффективность сотрудника;
• получение уведомлений. С помощью смс или электронной почты вы сможете контролировать активность вашего ресурса;
• блокировка нежелательных пользователей. Функция позволит оградиться от проблем и сберечь нервную систему персоналу;
• имитация живого общения в чате. Поможет автоматически заинтересовать пользователя, стимулировать его покупательскую активность.

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

В этой статье мы изучим, как добавить на сайт форму обратной связи и настроить её под свои поля. Отправляет данные эта форма на почту. Её код написан на чистом CSS, JavaScript и PHP.

Назначение и основные характеристики

Форма обратной связи (на английском feedback или contact form) – это один из способов взаимодействия клиента с менеджером или владельцем сайта. Например, её можно использовать для получения отзывов от клиентов, заказа услуг, оставления заявок и т.д.

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

Основные характеристики этой формы:

• работа без перезагрузки страницы (через AJAX);
• наличие графической капчи для защиты от спама;
• возможность добавления файлов;
• валидация данных на стороне клиента (в браузере) и на сервере;
• отправка успешных форм на почту (файлы могут приходить как в виде вложений, так и в виде ссылок).

Исходные коды

Файлы формы обратной связи расположены на GitHub: https://github.com/itchief/feedback-form.

Оформление формы выполнено с помощью стилей, находящихся в файле «form-processing.css». Для исполнения серверных сценариев необходимо иметь PHP не ниже v7.0.

Другие архивы различных форм, созданных на основе этой, можете посмотреть на «Яндекс.Диск».

Скриншоты

Установка и настройка

1. Добавить форму в HTML документ.

Указание обработчика осуществляется с помощью атрибута action. Форма используется для получения сведений от пользователя. Пример формы расположен в «index.html».

2. Подключить к странице CSS и JavaScript файлы:

JavaScript используется для отправки формы на сервер через AJAX (без перезагрузки страницы), а также для проверки вводимых пользователем данных и отображения сообщения об успешном завершении.

3. Написать код для вывода сообщения об успехе.

Например, для этого в «index.html» используется следующий HTML и JavaScript.

Метод reset() используется для сброса формы.

4. Инициализировать форму как ItcSubmitForm:

Передача дополнительных настроек осуществляется в формате объекта, который нужно указать в качестве 2 аргумента:

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

5. Настроить константы в серверном php-скрипте «form-processing.php».

5.2. Файлы (поле attach):

5.3. Настройки почты:

5.4. Отправка уведомления пользователю (необходим email в форме):

// необходимо ли отправлять уведомление пользователю на почту
const HAS_SEND_NOTIFICATION = false;
// тема письма
const SUBJECT_FOR_CLIENT = ‘Ваше сообщение доставлено’;

5.5. HAS_WRITE_LOG определяет, необходимо ли писать предупреждения и ошибки при обработке формы в лог (файлы записываются в папку /feedback/logs/):

// писать предупреждения и ошибки в лог
define(‘HAS_WRITE_LOG’, true);

5.6. Константа HAS_WRITE_TXT определяет необходимо ли сохранять успешные формы в файл «/feedback/logs/forms.log»:

// записывать успешные формы в файл forms.log
const HAS_WRITE_LOG = true;

6. После завершения настройки, скопировать папку «feedback» в корневую директорию сайта.

По умолчанию в папке «feedback» имеется файл «index.html». Его можно использовать для тестирования формы перед тем как создавать свои на нужных страницах.

На сайте с доменным именем «domain.com» эта форма будет доступна по следующему URL: http://domain.com/feedback/ (или https://domain.com/feedback/).

Часто задаваемые вопросы

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

1. Удалить из HTML блок с капчей:

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

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

2. При необходимости можно создать маску для телефона. Например, на базе «masked_input_1.4.1-min.js»:

3. Добавить в «form-processing.php» код для валидации номера телефона:

Также необходимо добавить строчку, которая будет заменять плейсхолдер %phone% в шаблоне письма:

В месте, где записываем лог:

4. Добавить в шаблон письма «email.tpl»:

Как использовать почту Gmail

По умолчанию в аккаунте Google отключена возможность отправлять почту через SMTP-сервер Gmail с помощью PHP. Чтобы её включить необходимо предоставить доступ к аккаунту для приложения.

Но перед этим, необходимо узнать текущее состояние двухэтапной аутентификации.

Для этого необходимо перейти в Google аккаунт и открыть раздел «Безопасность». В группе «Вход в аккаунт Google» найти настройку «Двухэтапная аутентификация» и посмотреть её статус.

В противном случае, т.е. когда настройка «Двухэтапная аутентификация» включена необходимо выполнить другие действия, а именно создать пароль для приложения. Т.к. использовать пароль, который вы используете для обычного входа на почту, для SMTP аутентификации в соответствии с безопасностью Google в этом случае нельзя.

Для создания паролю приложению нужно перейти в Google аккаунт, а затем в раздел «Безопасность». Далее на этой странице найти группу настроек «Вход в аккаунт Google» и кликнуть на ссылку «Пароли приложений». На открывшейся странице из раскрывающегося списка «Приложение» необходимо выбрать «Другое (введите название)» и написать, например, имя своего сайта, а затем нажать на кнопку «Создать». Созданный пароль необходимо скопировать, он нам нужен будет при настройке отправки почты с использованием PHPMailer.

Для этого необходимо открыть файл «form-processing.php» и сделать следующие настройки почты:

При включенной двухэтапной аутентификации Google мы указываем в качества ключа password пароль, созданный для приложения. В противном случае – пароль от аккаунта.

Нескольких форм на одной странице

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

1. Добавить к каждой из них id (например, form-1, form-2 и т.д.), для того их можно было более просто получить.

2. Если их обработка на сервере будет значительно отличаться, то создать необходимые php-скрипты и указать их в action:

3. Добавить в URL адрес для капчи GET-параметр id (так образом мы можем создать свою капчу для каждой формы):

4. Выполнить инициализацию форм как ItcSubmitForm:

// инициализация #form-1
ItcSubmitForm.getOrCreateInstance(‘#form-1’);
// инициализация #form-2
ItcSubmitForm.getOrCreateInstance(‘#form-2’);

5. Внести изменения в «form-processing-1.php» и «form-processing-2.php» для обработки форм. Изначально эти файлы можно создать как копии «form-processing.php».

Пример с двумя формами, расположенными на одной странице, расположен на GitHub в папке examples.

Что внутри?

Форма в HTML состоит из следующих элементов:

Работа формы выполняется через AJAX.

Запрос на сервере обрабатывается в «form-processing.php». Сначала в нём осуществляется валидация данных. При их корректности осуществляется отправка формы на указанный в настройках email. Результат обработки формы отправляется клиенту в формате JSON.

После получения ответа от сервера, JavaScript разбирает его и определённым образом обновляем страницу.

Как организована валидация

Валидация полей формы в JavaScript выполняется с использованием метода checkValidity():

Метод _setStateValidaion() устанавливает для элемента определённые классы, которые используются для его стилизации.

Как генерируется капча

Для генерации капчи используются 3 файла:

• oswald.ttf (шрифт, посредством которого код капчи пишется на изображении);
• background.png (изображение, на которое накладывается текст капчи).

При нажатии на кнопку Обновить генерируется новый код капчи и обновляется его изображение на странице.

Добавление файлов в форму

Для создания превью изображений в JavaScript используется FileReader.

Файлы формы обратной связи имеют кодировку UTF-8 без BOM. Для проверки работоспособности формы в Денвере необходимо в корне сайта создать файл .htaccess и добавить в него строчку: AddDefaultCharset UTF-8.

Что отправляет form-processing. php на клиент (в браузер)

В «form-processing.php» отправляется всегда то, что находится в переменной $data.

Результат обработки находится в ключе result. Он может иметь одно из следующих значений:

• ‘success’ – успех;
• ‘error’ – при обработке формы возникли ошибки.

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

Добавление файлов к письму

По умолчанию файлы прикрепляются к письму. Осуществляется это так:

Кроме этого имеется также возможность добавить их в виде ссылок в тело письма (зависит это от значения константы HAS_ATTACH_IN_BODY)

В письмо «email.tpl» они вставляются в место, определяемым плейсхолдером %attachs%.

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

В последнее время всё чаще слышно о концепции No-Code: создание приложений и сайтов без написания кода. Идея очень тесно пересекается с методологиями гибкой разработки Agile, где разработка ведётся маленькими итерациями, позволяя «повернуть» в нужную сторону максимально быстро, не теряя время и ресурсы на заранее неизвестные цели. Для этого будущий предприниматель собирает простую landing-страницу и пытается привлечь потенциальных покупателей услуги. И когда начинает появляться какой-то доход, тогда предпринимаются усилия по расширению услуг, улучшению качества и масштабированию.

Как правило, помимо визуальной части (баннеров, картинок) нужен ещё и какой-то функционал, что часто требует привлечения дорогостоящих специалистов в программировании и затрат на оплату инфраструктуры вроде серверов и баз данных.

No-Code решения действительно помогают сократить первоначальные инвестиции. Однако, бизнесы бывают разные, и No-Code платформы подойдут не каждому. Особенно, если ваш будущий бизнес всё-таки хоть немного про IT. У любой No-Code платформы есть ограничения, в которые вы обязательно упрётесь, как только ваша идея начнёт расти и понадобится расширять или чуть-чуть усложнять сайт/приложение. Иными словами, лучше контролировать то, какие технологии вы используете, чтобы можно было дорабатывать сайт, а не переделывать всё с ноля.

В статье я расскажу, как использовать бессерверные облачные технологии, которые от вас потребуют оплату только за фактическую отправку данных с формы, когда действительно пришел клиент и действительно что-то написал. Эта оплата составляет считанные цент (согласитесь, немного?).

Сразу оговорюсь, что данная статья не про Agile, и не про No-Code, и не про разработку (кода будет очень мало, но он будет). Она скорее подойдет людям, у которых уже есть базовые навыки HTML и CSS для создания простейших веб сайтов. Вероятно, это хоть немного технически подкованные люди, либо студенты колледжей и институтов, а может быть даже школьники. Проблемы, которые данная статья поможет решить следующие:

1. Как бесплатно разместить ваш сайт в Internet

2. Как завести email адрес для бизнеса (с доменом вашего сайта) и привязать его к сайту организации

3. Как сделать форму обратной связи на этом сайте, отправляющую сообщения на почту вашей организации

В общем, мне как разработчику, кажется, что аудитория довольно узкая, но кому-то может быть полезно. Поехали!

Требования «бизнеса»

Итак, что нам требуется c «бизнес» стороны вопроса:

1. Как правило, желательно иметь какое-то внятное доменное имя, если ваши дальнейшие намерения серьёзны. Имя вроде mysuperbusiness.com. Домен нужно будет купить.

3. Нужен небольшой сайт — это две-три страницы описания идеи, или того, что вы там хотели бы проверить. Одна из страниц будет формой отправки обратной связи или обращения. На ней как минимум необходимы поля Тема, Email автора, Текст и кнопка Отправить. По нажатию кнопки Отправить, введённые данные должны приходить на вашу новую почту. Очевидно, сайт нужно создать и потом разместить в интернете, чтобы все могли на него заходить.

Реализация «бизнес-требований»

Домен для бизнеса и бизнес почту предлагаю реализовать, используя облако от компании Amazon, пожалуй, самого распространённого облачного провайдера (как минимум, на рынке США, ведь нам нужно думать сразу глобально, правильно?).

Что касается сайта, то если сложнее контактной формы на сайте ничего пока не нужно, то можно сделать полностью статический сайт, который можно будет быстро и очень дёшево (или бесплатно) разместить в Internet. Статический сайт — это сайт, состоящий из чистого HTML+CSS, БЕЗ программирования на языках вроде php, C#, Java, NodeJS, и т.д. Немного кода нам всё же понадобится, но в данном примере глубокие знания программирования (пока) не нужны. Самое приятное то, что не нужно платить за хостинг (размещение) веб-сервера в Internet. Сайт мы разместим на бесплатном хостинге от https://github.com, всемирно известной платформы для разработки.

Помимо домена и почты, мы сможем также реализовать возможность отправки писем на эту почту прямо с вашего сайта, используя всё те же сервисы AWS. Затраты на описанный функционал не превысят 10 долларов в месяц. Плюсами использования этого облака также будет то, что как только вам понадобится (или вы «созреете») сделать что-то более сложное на вашем сайте, то вы с лёгкостью сможете арендовать нужную инфраструктуру (сервера, базы данных, и прочее) и перенести весь сайт с платформы GitHub в облако Amazon и построить там свой собственный Netflix.

Техническое решение

Мы будем использовать бессерверные технологии и сервисы AWS для обработки отправки сообщений с формы обратной связи. По сути, на форме обратной связи будет кнопка Отправить, по нажатию которой должно происходить действие отправки сообщения на почту вашей организации. Технически, это будет работать благодаря трём компонентам:

1. Кусочку JavaScript кода, размещенному в HTML файле вашей страницы обратной связи, развёрнутый и опубликованный на хостинге от GitHub

2. Связке сервисов Amazon Lambda и Amazon API Gateway, которую вышеупомянутый кусочек JavaScript будет вызывать, передавая текст сообщения.

3. Сервису Amazon Simple Email Service (SES), который по команде от Amazon Lambda будет отправлять сообщение на почту именно вашей организации.

Диаграмма технического решения

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

Все сервисы Amazon будут доступны в вашем «личном кабинете» (это называется «Консоль AWS», хотя имеется в виду сайт Amazon с UI) после регистрации. Из сервисов AWS нам понадобятся следующие:

• AWS Route (для покупки и контроля доменных имен)
• AWS Lambda (для бессерверной отправки сообщений с формы на сайте)
• AWS WorkMail (для регистрации бизнес почты)
• AWS SES (для отправки сообщений)

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

Шаг 1. Регистрируемся на Amazon Web Services (AWS)

Так же не стоит пугаться того, что подтверждение регистрации производится голосом по телефону (вам на экран высветится PIN-код, который надо будет ввести во время звонка) или текстом по SMS. Обычно, я пользуюсь первым способом.

Шаг 2. Покупаем доменное имя

1. Зарегистрируйтесь в сервисе, нажав на кнопку входа в аккаунт на странице сервиса.

3. Подберите свободное доменное имя (кнопкой Check) в нужной области (лучше .com) и по нужной вам цене. Для этого нужно просто пройти 3-х шаговую форму, описывать это я не буду.

Панель AWS Route 53 для подбора доменных имён

Важно лишь понимать, что сервис Route 53 автоматически создаст для вас всё необходимое и это всегда можно отредактировать и поменять, используя консоль управления AWS.

Шаг 3. Регистрируем почту для в домене бизнеса

Для регистрации и управления почтой мы воспользуемся AWS WorkMail – сервисом электронной почты для организаций. На момент осени 2021 года ведение одного почтового ящика будет обходиться вам в 4$ в месяц.

Вся настройка происходит в консоли AWS. Всё что нужно сделать это 3 шага:

2. Добавьте ранее зарегистрированный вами домен и верифицировать его. Для этого нужно пройти по шагам, описанным тут. Процесс верификации подтвердит, что вы действительно являетесь владельцем домена и нужен он потому, что домен мог быть куплен и вне AWS. Однако, в нашем случае домен куплен тут же, поэтому проблем с процессом не будет. В случаях, если домен куплен у другого регистратора, то могут потребоваться дополнительные шаги.

Теперь остаётся подсоединить ваш любимый Email клиент к почте и протестировать связь, отправив на него и с него письмо. Руководства по настройке тут:

Создаём сайт

Пожалуй, для вас это самая самостоятельная часть этого руководства. В зависимости от вашего опыта вы можете воспользоваться готовыми шаблонами сайтов, скопировать чей-то (может быть это и плохой совет, но так действительно делают многие на первых этапах), или создать с ноля свою небольшую landing страницу используя базовый HTML и CSS. Помните, чем проще и минималистичнее будет страница, тем лучше.

Будем считать, что в спокойной домашней обстановке, за пару вечеров в пижаме и тапочках, вы создаёте простой статический сайт с картинками, описанием услуги/идеи, и формой обратной связи. Можно сразу начинать с готовых шаблонов Bootstrap (самой популярной и простой библиотеки для HTML/CSS). Пройдя по их руководству можно за 10 минут создать простейшую страницу. А если позволяет опыт, то можно воспользоваться готовыми шаблонами и быстро создать более сложные страницы.

Допустим, что ваша форма обратной связи выглядит так:

Для создания этой формы достаточно примерно такого кода:

Конечно, тут приведен минимальный пример, который нужно привести в порядок с помощью CSS, но он уже функциональный. С помощью библиотеки jquery можно проверить поля на предмет наличия текста и отправить данные вашему API.

Размещение сайта в Internet

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

После того как вы зарегистрировали организацию, нужно создать «репозиторий». Это хранилище, в которое вы загрузите все свои исходные файлы для сайта – HTML, CSS, картинки). На странице профиля вашей организации найдите самую яркую зелёную кнопку New, введите имя репозитория в формате (“.github.io” – это важно) и выберете флажок Public (это означает, что ваши исходники будут публично доступны). Да, Public размещение исходных файлов приложение может показаться минусом данного решения, ведь все смогут посмотреть, из чего состоит ваш сайт. Именно поэтому такое решение подходит для начальной стадии, когда сильно сложного или секретного ничего не происходит. В случае более серьезной разработки, за которую вы платите свои кровные деньги, будет логичным перенести всё в Private-репозиторий, но тогда потеряется возможность бесплатного хостинга.

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

Однако, нам нужно привязать доменное имя и почту организации. Следуя инструкциям нужно связать регистратора вашего домена (AWS Route 53) с платформой хостинга сайта (GitHub):

1. В настройках репозитория GitHub в поле Custom domain введите адрес вашего платного домена: mybusiness.com. Сохраните изменение (после этого в вашем репозитории появится файл CNAME, в котором это доменное имя прописано).

2. В соседней вкладке браузера откройте страницу «Консоли AWS» и поиском найдите сервис Route53

3. Перейдите на страницу своей зоны (Hosted Zone).

4. Нажмите “Create record” и создайте запись типа “CNAME” (выбирается из списка):

• Выбираем Record type = CNAME
• Record name = www
• Value = mybusiness.github.io

5. После этого подождите несколько, обычно до 24, часов, чтобы DNS записи прописались во всех маршрутизаторах на пути к AWS

Через некоторое время ваш сайт станет доступным с URL https://www.mybusiness.com. А пока можно заняться подготовкой бек-енда.

Верифицируем домен для AWS SES

В цепочке отправки писем всегда есть Источник и Адресат. Адресатом в данном случае будет Email адрес, который вы уже сделали выше. Для отправки почты с помощью кода необходимо воспользоваться специальным сервисом AWS Simple Email Service, который будет являться Источником сообщений.

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

Переходите на сервис Amazon SES, Domains и нажимайте Verify a Domain Name, вводите домен своего сайта и следуйте инструкциям в верхней части формы (нижние нас пока не касаются):

1. В соседней вкладке браузера откройте сервис Route53, в котором перейдите на свою зону, как уже делали ранее.

2. Жмём “Create record” и создаём запись типа “TXT”:

3. Сохраните изменения.

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

Создаём логику отправки сообщений

Сначала нужно разрешить коду, исполняемому в облаке, отправку сообщений. Для этого надо создать так называемые IAM-разрешения (Оригинальные инструкции):

1. В соседней вкладке браузера откройте сервис IAM (найдите его поиском, это удобно), и перейдите на страницу Policies.

2. Жмите “Create policy”

3. Выберите вкладку JSON

4. Вставьте в поле код нашего разрешения, приведённый ниже:

5. Дайте имя вроде MyBusinessEmailSender

6. Сохраните изменения.

7. Перейдите на страницу Roles и жмите “Create Role”

8. Выберите сервис Lambda

9. Далее, выбирайте из списка ваше разрашение MyBusinessEmailSender

10. Дайте Роли имя вроде MyBusinessEmailSenderRole

11. Сохраните изменения.

Таким образом, вы создали разрешение и роль. Они дают возможность отправлять Email, а так же логгировать события отправки для отладки. В официальной документации можно также найти примеры других разрешений IAM для SES.

Теперь самое время создать бессерверную функцию, которая будет просыпаться в момент прихода сообщения и слать его к вам на почту используя AWS SES.

1. В соседней вкладке браузера откройте сервис Lambda, в котором перейдите на страницу Functions

2. Введите имя функции, пусть будет “MyBusinessEmailSendFunction”.

3. На странице Permissions под Execution role, подтвердите, что созданная ранее роль назначена вашей функции

4. Под Function code в редакторе editor pane, вставьте нижеследующий JavaScript код функции, представленный ниже, сначала заменив в одной из верхних строк код региона us-west-2 на код вашего региона выбранного в «Консоли AWS». Его можно найти в пункте меню справа сверху.

5. Нажмите кнопку Deploy, чтобы сохранить функцию.

В коде функции мы используем возможности библиотеки разработки AWS SDK, которую вам следует изучить детальнее, если вы планируете расширять функционал.

Такие функции работают на основе событий. События приходят, они их обрабатывают, отправляя либо ответ, либо создавая новые события следующим функциям или сервисам (как в нашем случае). Теперь давайте проверим, работает ли функция:

1. На странице вашей функции найдите вкладку Test

2. Выберите New event

3. Дайте имя вашему тесту, чтобы можно было его повторять

4. Введите данные теста в виде следующего JSON:

5. Нажмите Test

6. Проверьте получение почты

В инструкции вы найдёте больше деталей о том как настроить тестовое событие.

Добавляем публичный API адрес через AWS API Gateway

Теперь необходимо дать возможность коду, внешнему к вашему облаку, и развёрнутому где-то на серверах Git Hub, достучаться до вашей функции отправки сообщений. Для этого нам понадобится так называемое публичное API. Для этого мы воспользуемся ещё одним сервисом AWS API Gateway:

1. В «консоли AWS» на странице сервиса Lambda нажмите кнопку Add trigger

2. Выберите API Gateway и в ниспадающем списке Add API

3. Выберите тип REST API и дайте имя вроде MyBusinessEmailApi

4. На странице Resources выбирайте из списка Actions пункт “Create Resource”

5. Назовите новый ресурс “send-email” и обязательно выберите галочку “Enable CORS”

6. Выделив только что созданный ресурс выберите из списка Actions пункт “Create Method” типа POST

7. Теперь нужно связать этот API с функцией, которая будет исполняться. Введите имя своей функции, созданной выше:

8. В результате, у вас должен появиться REST API с двумя методами: POST (для отправки сообщений) и OPTIONS (это метод, используемый браузерами для проверки безопасности).

9. Осталось сделать его доступным, выбрав из списка Actions пункт Deploy API

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

Связываем контактную форму с API

Осталось пойти в репозиторий с кодом на GitHub и отредактировать файл HTML формы, подставив в коде JavaScript правильный URL адрес в атрибут “action” вашей HTML формы:

Можно тестировать!

Итого, мы построили техническое решение, которое:

• Располагается на бесплатном высокодоступном хостинге
• Обрабатывает запросы от сайта в облаке и реализует задачу получения сообщений с фидбеком от клиентов
• Требует меньше 10 долларов в месяц и предполагает дальнейшее расширение

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

Что следует знать

Это решение не идеально и требует доработок. Вот минимально необходимые доработки:

2. Создание полноценной аутентификации. Это позволило бы не только защититься от спама, но и создать базу клиентов с их контактами.

3. Автоматический деплой скриптами yaml. Это нужно разработчикам, для автоматизации и ускорения развёртывания.

1. Лимит на отправку сообщений в минуту, выставленный на уровне AWS

2. Вы не платите за нагрузку/трафик, а лишь за запуск Lambda вычисления КОГДА НУЖНО и МОЖНО (в случае флуда вы не переплатите)

Это руководство позволяет сделать первый шаг. Не останавливайтесь, и делайте следующий!

Вы тратите большие бюджеты на привлечение потенциальных клиентов. И каждый ушедший с сайта посетитель — это недополученная прибыль.

А причин для ухода много: недостаток информации на странице, отсутствие времени у пользователя изучать ее здесь и сейчас, сомнения в необходимости товара или услуги.

Решить эти и другие проблемы помогает виджет обратного звонка.

Что такое обратный звонок на сайте и как он устроен

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

Настраивается коллбек через виджет, которому задаются правила появления.

• Попытка ухода посетителя с сайта. Как только курсор мышки попадает за границы экрана браузера, появляется всплывающее окно с сообщением в стиле: «Остались вопросы? Напишите свой телефон, и мы вам перезвоним!».
• Наведение курсора на кнопку. Callback pop up появляется, когда пользователь навел курсор на кнопку формы заявки или регистрации, но не кликнул на нее.
• Самостоятельный вызов виджета. Реализуется в виде кнопки на сайте, наложенной поверх страницы и остающейся на экране при ее пролистывании. Нажимая на кнопку, пользователь запрашивает обратный звонок.

Кнопка виджета обратного звонка на сайте компании akterm.ru. Всегда остается на месте при пролистывании страницы

После того как посетитель заполнит и отправит форму колбэк, заявка передается в систему и в зависимости от настроек:

• Менеджер компании перезванивает пользователю через 30 секунд после получения заявки. В настройках можно указать и другой временной период, например, 17 или 27 секунд.
• Если запрос на обратный звонок с сайта поступил в нерабочее время, менеджер перезвонит как только начнется рабочий день.
• Если в поле есть возможность указать удобное время звонка менеджер перезванивает в то время, которое указал клиент.

При этом, все процессы автоматизированы, что исключает вероятность задержки звонка из-за человеческого фактора. Менеджер может принимать обратный звонок на мобильный, городской или SIP-телефон.

Подробнее о возможностях настройки callback здесь.

Пример виджета обратного звонка от calltracking.ru

Для чего нужен виджет обратного звонка

Пример роста продаж после подключения виджета обратного звонка

В Callback сервисе менеджер перед звонком видит информацию о клиенте, а именно:

• Историю обращений.
• Регион и город, из которого звонит клиент.
• Детализированные данные по трафику:ключевые слова поиска, по которым он попал на сайт;просмотренные страницы;время, проведённое на сайте.
• Запись звонка по итогу разговора.

Это улучшает взаимодействие и положительно сказывается на лояльности.

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

Есть еще одна очень удобная функция Callback виджета. В нем можно настроить черный список номеров, которые будут автоматически отсеиваться, а менеджеры не будут тратить на них время. Это особенно полезно, когда через форму оставлен СПАМ-номер.

Как сделать, чтобы дизайн виджета соответствовал сайту

Настройки формы колбек позволяют:

• Адаптировать дизайн под стиль сайта и разные типы устройств. В конструкторе дизайна можно выбрать однотонный фон виджета или установить свою картинку и текст.
• Сделать как один виджет для всего сайта, так и отдельного для каждой страницы.
• Расположить виджет в углу экрана в виде кружка или настроить его появление в виде поп-ап окна при скролле страницы.
• Выбрать поля контактов.
• Настроить время и условия показа виджета.

Адаптация виджета обратного звонка под разные типы устройств

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

Что еще можно настроить в виджете

Помимо дизайна в виджете можно настроить:

• Сообщения, которые видит пользователь. В том числе и предложения скидок за оставленный телефон.
• Время, через которое менеджер перезвонит. Так клиенту проще принять решение оставить свои контакты. Обратный звонок за 30 секунд после отправки формы существенно увеличивает вероятность продажи.
• Условия показа формы: будет ли она появляется автоматически или при совершении какого-либо действия на сайте.
• Номер телефона, который будет видеть клиент при обратном звонке. Номер можно настраивать в зависимости от региона.
• Уведомления о поступивших заявках на обратный звонок. Уведомления могут приходить как в виде sms, так и на email.
• Режим работы виджета. Его можно отключать в нерабочее время.

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

Как оценить эффективность работы Callback виджета

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

Скриншот дашборда Calltracking.ru

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

Интеграция Callback позволяют автоматически передавать статистику в:

• Рекламные кабинеты.
• Системы аналитики.
• CRM-системы.
• Сервисы оптимизации контекстной рекламы.

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

Заключение

• С его помощью рекламные бюджеты расходуются более эффективно.
• Возможности кастомизации позволяют настроить дизайн виджета под любой сайт, а поля формы под потребности бизнеса.
• Виджет собирает информацию об истории обращений клиентов и эффективности рекламных каналов. После чего автоматически транслирует эти данные в CRM и системы веб-аналитики.
• Сама настройка callback виджета занимает всего 12 минут и не требует наличия специальных знаний.
• А цены на него начинаются от 950 руб./мес. за 50 звонков.

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

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

Данная форма – это проект с исходным кодом, который расположен на GitHub по адресу: https://github.com/itchief/feedback-form-in-modal.

Характеристики формы обратной связи

Представленная форма выполнена с использованием комопнентов Bootstrap 4 и jQuery. Серверный код фомы написан на PHP.

Другие характеристики формы:

• открытый исходный код, проект доступен на GitHub;
• отправка данных формы на сервер и получение ответа осуществляется без перезагрузки страницы, т.е. посредством технологии AJAX;
• наличие графической капчи (для защиты от спама);
• возможность прикрепления к ней файлов (по умолчанию до 5);
• проверка данных формы (валидация) организована как на клиенте, так и на сервере;
• отправка данных формы после успешной валидации на почту менеджера (администратора), и письма о доставке клиенту;
• логирование отправки (данные сохраняются в файл message.txt).

Установка формы на страницу

Основные действия по подключению формы обратной связи.

1. Добавить кнопку или ссылку для вызова модального окна.

2. Создать модальное окно и поместить в него HTML код формы обратной связи.

3. Подключить стили и скрипты используемых компонентов (jQuery, Bootstrap) и самой формы (main.css, main.js):

Как скачать форму обратной связи

Загрузить форму можно с GitHub. Перейти на страницу проекта можно с помощью следующей кнопки:

Форма на GitHub

Архив форм на Github:

Версия 1.0 (Bootstrap 3)
Версия 2.0 (Bootstrap 4)

Как работает форма обратной связи

Скриншоты формы обратной связи:

1. Кнопка, посредством которой вызвается модальное окно с формой:

2. Вид формы в модальном окне:

3. Как происходит проверка полей формы:

4. Сообщение об успешной отправке:

Форма обартной связи в действии (видео): https://www.youtube.com/embed/PFGVFR2BvW0

Статья, в которой рассмотрим, как создать форму обратной связи для сайта, используя JavaScript, AJAX, популярный фронтенд фреймворк Bootstrap и PHP. Форма будет работать без перезагрузки страницы. Введённые данные будут отправляться на почту (email).

Загрузка формы обратной связи

Проект по созданию формы обратной связи (для Bootstrap 4) находится на гитхабе по адресу: https://github.com/itchief/simple-feedback-form.

Демо формы обратной связи

Предыдущая версия AJAX формы обратной связи (для Bootstrap 3) доступна по этой ссылке.

Более сложные варианты форм обратной связи:

Файловая структура формы обратной связи

Форма обратной связи имеет следующую структуру:

• oswald.ttf – шрифт, которой будет использоваться для вывода кода капчи на изображении;
• background.png – фон, на который будет «накладываться» код капчи;
• main.css – стили (не Bootstrap) для формы обратной связи;
• main.js – скрипт, выполняющий инициализацию формы обратной связи;
• process-forms.js – скрипт, обеспечивающий логику работы формы обратной связи на клиенте (в браузере);
• logs.txt – текстовый файл, в который будет записываться лог после отправки формы обратной связи;
• phpmailer – php-библиотека, которую будем использовать для отправки email-сообщений;
• email.tpl – шаблон email-письма для получателя;
• email_client.tpl – шаблон email-письма для отправителя;
• process.php – скрипт, посредством которого будем обрабатывать форму на сервере;
• index.html – HTML-документ, содержащий форму обратной связи;

В каталоге vendors расположены фреймворк Bootstrap и библиотека jQuery.

Установка формы обратной связи

По умолчанию контактная форма (папка feedback вместе со всем содержимым) должна быть помещена в корневую директорию сайта. Т.е. путь к файлу index.html должен быть таким:

В проекте используются абсолютные пути к файлам. Это позволяет установить форму обратной связи очень просто, путём простого копирования HTML формы из файла index.html в любое место необходимой страницы сайта.

Настройка файлов при изменении структуры

Если нужно модифицировать структуру формы обратной связи, т.е. изменить расположение файлов, то в этом случае потребуется откорректировать пути в файлах index.html (или там где расположена форма) и process.php. Рассмотрим, как это выполнить более подробно.

Настройка путей к файлам в index.html

В файле index.html путь к php-обработчику формы задаётся с помощью атрибута формы action. Если обработчик перенесён в другое место, то значение данного атрибута необходимо изменить.

Кроме этого к странице, в которой будет использоваться форма, должны быть подключены фреймворк Bootstrap 4 (bootstrap.js, bootstrap.css), библиотека jQuery (jquery.js) и скрипт process-forms.js.

Инициализация формы выполняется следующим образом (в проекте для этой цели используется файл main.js):

Настройка путей к файлам в process.php

В файле process.php для отправки писем используется библиотка PHPMailer. При модификации структуры проекта проверьте и при необходимости откорректируйте путь к этой библиотеки (PHPMailer), а также ещё к файлу logs.txt.

Как осуществляется валидация формы

В данной форме валидация осуществляется как на клиенте, так и на сервере.

Скриншот формы с ошибками валидации:

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

Установка требований к полям формы обратной связи определяется с помощью атрибутов type, required, minlength, maxlength, pattern и др.

Например, требование к полю name в данном проекте:

На сервере валидация данных формы осуществляется в файле process.php.

Например, валидация поля name осуществляется с помощью следующего php-кода:

Описание формы обратной связи

Форма по умолчанию состоит из трёх основных полей (имени, email-адреса, сообщения), капчи, чекбокса и кнопки “Отправить сообщение”.

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

После заполнения полей формы пользователь может с помощью соответствующей кнопки её отправить на сервер.

Отправка данных на сервер выполняется с помощью JavaScript (AJAX). Но перед тем как их передать серверу по технологии AJAX, он должен их проверить на корректность.

Все действия по обработке формы в браузере, а также обновление страницы после получения ответа от сервера выполняет код JavaScript, находящийся в файле process-forms.js.

Инициализация работы этого скрипта (process-forms.js) осуществляется с помощью кода расположенного в файле main.js.

Основные действия, которые выполняет сценарий JavaScript, расположенный в файле process-forms.js:

• обновление кода капчи, посредством изменения атрибута src у изображения;
• валидацию (проверку) полей формы перед отправкой их на сервер;
• отправку данных формы на сервер методом POST по технологии AJAX;
• получения ответа от сервера и отображения его результатов на странице;

После отправки формы на сервер, она передаётся для обработки файлу process.php.

Данный файл (process.php) выполняет следующие основные действия:

• получение данных с отправленной формы;
• проверку данных формы (полей, капчи) и формирования ассоциативного массива с результатами проверки;
• в случае успеха проверки даных – отправка email письма получателю и отправителю;
• отправка JSON ответа веб-браузеру с результатами.

Скриншот формы при её успешной отправки:

Принцип работы формы обратной связи представлен на схеме.