Онлайн-экскурсия в действующие бизнес-проекты с оборотом от 20 млн. рублей в год
Участвовать бесплатно
×
Обратный звонок для сайта: волшебная кнопка, увеличивающая конверсию Обратный звонок для сайта
Вернуться к Блогу
5565

Время чтения: 12 минут

Нет времени читать?
Отправить материалы на почту

Обратный звонок для сайта: волшебная кнопка, увеличивающая конверсию

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

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



Суть формы обратного звонка для сайта

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

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

Сегодня кнопка обратного звонка, установленная на ресурсе, налагает на владельца ответственность: реагировать на заявку клиента нужно быстро, а то и моментально, ведь даже 15-минутное промедление грозит потерей потенциального покупателя. Заказывая связь с оператором, человек тем самым демонстрирует свою заинтересованность в предложении и желание проконсультироваться со специалистом, уточнить детали. Потенциальный клиент уже теплый, и не нужно давать ему остыть.

Суть формы обратного звонка для сайта

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

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

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

Плюсы и минусы формы заказа обратного звонка на сайте

Рассмотрим вполне жизненную ситуацию, с которой может столкнуться любой клиент любого бизнеса. Некто Михаил набирает в поисковике «туры в Грецию за N рублей на N дней». Далее события могут развиваться в двух направлениях.

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

Но Михаил очень хочет поехать в Грецию, поэтому ищет в контактах форму для обратной связи с агентством и терпеливо вносит все требуемые сведения: имя, адрес электронной почты, номер своего телефона, кратко излагает суть вопроса. «Спасибо за обращение, мы перезвоним вам в ближайшее время» — увидев это сообщение на экране, Михаил радуется: поездка мечты все ближе. Но проходит десять, двадцать минут, а звонка все нет. Дело в том, что менеджер турагентства Наталья, ответственная за обработку входящих заявок, воспользовалась своим законным правом на обеденный перерыв как раз тогда, когда Михаил заполнял заявку. Так что обещанное «ближайшее время» наступит не ранее, чем у Натальи завершится обед.

Второй возможный сценарий. Терпение Михаила иссякает, он заходит на сайт другого агентства и ищет туры в Грецию. Он даже не успевает толком рассмотреть фотографии с шикарными видами Крита и Корфу, как всплывающее окошко предлагает ему заказать звонок от менеджера: «Через 30 секунд расскажем вам все о поездках в Грецию и найдем лучшее решение».

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

Плюсы и минусы формы заказа обратного звонка на сайте

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

Что потребовалось клиенту для совершения покупки во втором случае? Зайти на сайт, заказать обратный звонок и изложить свои требования к поездке. Посетитель, заказывающий коллбэк, недвусмысленно показывает свой интерес к вашему предложению. Виджет позволяет работать с заинтересованными в сотрудничестве клиентами. Обладает он и другими неоспоримыми преимуществами:

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

  2. Создание положительной репутации компании (пообещали перезвонить через 30 секунд — значит, звонок состоится ни секундой позже).

  3. Увеличение продаж (клиент может быстро получить ответы на свои вопросы, выяснить всю интересующую его информацию).

  4. Больше шансов на сотрудничество, ведь люди ценят оперативность связи, квалифицированность менеджеров и качество технической поддержки.

  5. Точная оценка эффективности работы службы поддержки и отдела продаж (виджет позволяет вести мониторинг работы сотрудников в части взаимодействия с клиентами).

  6. Статистика (если компания использует несколько веб-ресурсов, можно понять, какие из них выступают основными лидогенераторами).

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

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

Какие ресурсы смогут оценить пользу виджета?

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

Наибольшую актуальность виджет callback имеет для веб-ресурсов, занимающих нишу в следующих сферах:

  • Юридические услуги.

  • Бухгалтерские услуги.

  • Медицинские услуги.

  • Реализация материалов для строительства.

  • Продажа автозапчастей и компонентов.

  • Банковская сфера, финансовые организации.

  • Транспорт и логистика.

  • Сфера образования и т. д.

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

Cайты, которым нужна форма заказа обратного звонка

Повышение уровня обслуживания в целом и поддержки постоянных клиентов в частности — вот две основные задачи, решаемые через подключение сервиса обратного звонка. Размещение формы оправдано в следующих случаях:

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

  • Клиенту из-за границы дорого звонить самостоятельно, вам это будет стоить значительно дешевле, да и дальнейшее сотрудничество окупит расходы на связь.

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

  • Чтобы не потерять клиентов, для которых звонок в компанию является психологической преградой (стеснение или боязнь побеспокоить, услышать недоброжелательный ответ). Для таких пользователей заказ звонка — единственная возможность совершить покупку.

Каким сайтам нужна форма заказа обратного звонка

А вот когда сервис callback не нужен:

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

  • Трафик портала настолько высок, что у менеджеров нет возможности звонить посетителям и отвечать на одни и те же вопросы. В такой ситуации форма действительно не нужна — гораздо более эффективным решением будет создание раздела F.A.Q., где доступно изложены ответы на часто задаваемые клиентами вопросы.

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

Нюансы подбора сервиса обратного звонка для сайта

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

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

Чтобы заказ обратного звонка на сайте стал мощным маркетинговым инструментом, при подборе виджета нужно учитывать такие аспекты:

  1. Стоимость установки и последующего обслуживания сервиса.

  2. Интеграция с кол-центром (требуемое время и сложность процесса).

  3. Интеграция формы коллбэка в веб-ресурс (требуемое время и сложность процесса).

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

  5. Качество технической поддержки сервиса.

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

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

Что учитывать при внедрении инструментов обратного звонка

  • Расценки

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

  • Точечная настройка по филиалам/отделам

Если у компании несколько представительств в разных городах или даже странах, а сайт единый, необходимо обязательно внести в форму заказа звонка выбор страны/города/отдела и т. д. К примеру, страна — РФ, город — Екатеринбург, отдел — продажи. В противном случае клиент рискует не получить ответ на свой вопрос (оператор из Томска может не знать, как обстоят дела в Свердловской области) и будет разочарован. Важно учитывать и разницу во времени.

  • Сбор заявок в нерабочие часы

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

  • Уведомления об отмененном вызове (email, SMS и т. д.)

Если вызов по каким-то причинам был отменен (клиент набрал номер, нажал сброс, а потом забыл о звонке), нужно напомнить заказчику о себе.

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

  • Тоновый набор для операторов

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

Функции систем коллтрекинга

  • Целевая настройка для мобильной версии

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

  • Отключение десктопа от мобильной версии

Это необходимо, чтобы настройка сервиса для домашних ПК не влияла на мобильную версию.

  • Ринг-группы

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

  • Черный список

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

  • Внешний вид

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

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

Кейс: VT-metall
Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Узнать как

8 лучших виджетов обратного звонка для сайта

  1. UpToCall

    Минимальная цена за использование платной версии — 360 рублей в месяц. При этом правила расчета довольно странные. Так, за базовый тариф (1500 руб./месяц) покупатель получает 150 бесплатных минут разговора, по истечении которых за каждую минуту нужно заплатить 10 рублей.

    Лучшие виджеты обратного звонка для сайта_UpToCall

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

  2. Callback Hunter

    Минимальные расходы на обратный звонок для сайта от проекта «Коллбэк Хантер» составят 2500 рублей в месяц. В эту сумму включено 50 минут разговоров, любое количество звонков, интеграция с CRM.

    Лучшие виджеты обратного звонка для сайта_Callback Hunter

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

  3. Погоди Widget

    Минимальная цена за использование платной версии — 399 рублей в месяц, 7-дневный тестовый период. Базовую бесплатную версию можно использовать как основу, расширив ее купленными функциями, подходящими под ваши задачи.

    Лучшие виджеты обратного звонка для сайта_Погоди Widget

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

    Для работы можно арендовать городской многоканальный номер.

  4. Perezvoni.com

    Минимальная цена за использование платной версии — 1490 рублей в месяц. Можно оплачивать только состоявшиеся телефонные разговоры. Базовая бесплатная версия включает 5 смс-сообщений, 20 минут разговора, доступ к статистике.

    Лучшие виджеты обратного звонка для сайта_Perezvoni.com

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

  5. Envybox

    Минимальная цена за использование платной версии — 500 рублей/месяц (при оплате годовой подписки), 750 рублей, если оплачивать сервис ежемесячно. Но вообще он позиционирует себя как бесплатный и к тому же многоканальный. Разговоры оплачиваются поминутно в соответствии с тарифами сотовых операторов.

    Лучшие виджеты обратного звонка для сайта_Envybox

    Особенности: настройка виджета и условий его демонстрации (например, геофильтр), интеграция с CRM компании и сторонними системами аналитики, функция «Удиви клиента» (информация о прежних разговорах с пользователем для менеджера) и запись разговора (для клиентов), возможность использования онлайн-чата и других сервисов.

  6. Callbaska

    Минимальная цена за использование — 300 рублей в месяц. Чтобы убрать из формы название сервиса, нужно заплатить 6 тысяч рублей за год.

    Лучшие виджеты обратного звонка для сайта_Callbaska

    Особенности: возможность настройки формы и текста, цветовая палитра, настройка условий показа, сбор заявок в нерабочее время, черный список, интеграция с CRM и системами аналитики.

  7. LPTracker

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

    Лучшие виджеты обратного звонка для сайта_LPTracker

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

  8. RedConnect

    Платные версии рассчитываются полидно, но оплачиваются пакетно (средняя плата за клиента — 41 рубль). Бесплатный вариант — 1000 звонков и 30 минут разговоров, по истечении лимита каждая минута должна быть оплачена.

    Лучшие виджеты обратного звонка для сайта_RedConnect

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

Как добавить обратный звонок на сайт WordPress

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

А вот callback не входит в стандартный набор одной из самых популярных CMS в мире. Поэтому когда возникает необходимость в интеграции данного сервиса на сайт, работающий на WordPress, владельцы обращаются к поисковым системам.

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

Скачать скрипты обратного звонка для сайта на вордпрессовском движке можно с самых разных платформ, но наибольшей популярностью пользуется официальный ресурс WordPress.org. Оно и понятно, ведь здесь предоставляется богатейший выбор из десятков вариантов модулей. Можно сразу узнать, подходит ли плагин для вашей версии движка, его актуальность и рейтинг. К тому же рекомендуется скачивать и покупать плагины именно здесь (а также на русскоязычной версии официального портала движка) из соображений безопасности, ведь модули гарантированно не содержат вредоносных ингредиентов.

WordPress

Тройка лучших плагинов для WordPress, позволяющих создать на сайте коллбэк, выглядит следующим образом:

Call me spoot

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

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

Pozvonim

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

Как добавить обратный звонок на сайт WordPress

Скачивается с официального портала WordPress (требуется предварительная регистрация с указанием email, куда будет отправлен плагин).

CallPage

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

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

  1. Раздел «Плагины» в панели администратора.

  2. Пункт «Добавить новый».

  3. Откроется окно, где в строке поиска нужно ввести название выбранного варианта.

  4. Рядом с найденным плагином будет кнопка установки, если модуль бесплатен. Либо потребуется выплата указанной суммы, если плагин предоставляется на платной основе.

  5. Индивидуальные параметры настраиваются в разделе настроек.

Таким образом, установить плагин обратного звонка для WordPress просто и удобно. Можно применить и другой алгоритм, в ходе которого необходимо найти папку plugins в корневом разделе, где содержатся все файлы и папки, выгруженные на сервер хостинг-провайдера. Нужный плагин скачивается и добавляется в названную папку, после чего следует запустить процесс активации (через панель администратора).

Скачайте полезный документ по теме:
Чек-лист: Как добиваться своих целей в переговорах с клиентами

Как самостоятельно сделать на сайте функцию обратного звонка

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

Предварительный перечень того, что должно получиться

  • Красивая кнопка «Мы вам перезвоним» на странице.

  • Клик клиента по кнопке вызывает появление окна с двумя полями для заполнения: «Введите имя», «Введите номер телефона».

  • Требуется проверка полей на пустоту браузером (со стороны заказчика) и сервером (на стороне веб-ресурса).

  • Дополнительные кнопки формы: «Отправка» (отправить заполненную форму) и «Скрыть» (убрать всплывающее окно, если клиент не нуждается в обратной связи).

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

Пошаговая инструкция самостоятельного создания кода обратного звонка сайта

Шаг первый. В корне сайта нужно создать файл index.html, содержимое:

Как самостоятельно сделать на сайте функцию обратного звонка_создание файла index.html

Два поля для символов (имя и телефон), две кнопки (заказать, скрыть). Изначально блок с id "callback_form" скрыт.

Шаг второй. Создается файл style.css, содержимое:

Как самостоятельно сделать на сайте функцию обратного звонка_файл style.css

Задали стили непосредственно для кнопки, затем для формы заказа, потом стилизовали в ней теги "P" (Заказать и Скрыть).

Шаг третий. Создание файла callback.js, содержимое:

Как самостоятельно сделать на сайте функцию обратного звонка_файл callback.js

Из чего состоит jQuery-код:

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

  2. Прописывается функция, скрывающая окно после нажатия на «Скрыть».

  3. Полностью описываются варианты развития событий после щелчка по «Заказать» (имя, телефон, отправка, если все корректно).

Содержимое обоих полей изначально считывается в переменные, затем проводится проверка. Если они пусты, т. е. не заполнены заказчиком, то к элементам, лежащим на одном уровне с кнопками — siblings, применяется анимация — двукратно, с задержкой в 500 миллисекунд. Ее задача — сделать поля почти невидимыми, а потом вернуть их в нормальное состояние.

Это создает визуальный сигнал для заказчика, обращает его внимание на необходимость внести данные. После заполнения формы делается POST-запрос с помощью AJAX (имя и номер телефона отправляются PHP-скрипту).

Отправка пустых данных (обман проверки браузера) не сработает, поскольку PHP-скрипт возвратит ноль, что не позволит осуществить отправку до того момента, пока клиент не внесет требуемые данные.

Если же скрипт возвращает единицу, можно уведомить пользователя об отправке и скрыть форму: данные отправлены успешно.

Шаг № 4. Создание файла callback.php, содержимое:

Как самостоятельно сделать на сайте функцию обратного звонка_файл callback.php

Если пришли данные (существуют нужные элементы массива POST), то производим обработку этих данных: сначала обрезаем, оставив 20 символов, потом преобразуем специальные символы в HTML-сущности и убираем пробелы с обеих сторон.

После этого проверяем переменные name и phone на пустоту. Если они пусты, то отправляем 0 (его обработает javascript); если заполнены, то отправляем данные на email. На почту будет приходить письмо следующего вида:

Тема письма: Обратный звонок. Имя: Анатолий. Телефон: какой-то телефон.

Это рабочий способ отправки письма, которое все же может улететь в «Спам», гарантий нет.

Важно! В PHP-коде следует инициализировать две переменные:

  • $email — укажите ваш адрес (чтобы получать заявки).

  • $domen — укажите домен портала (где будет функционировать скрипт).

Облако тегов
Понравилась статья? Поделитесь:
Забрать подарки
из закрытой базы
Скачать 7,4 MB
Полезные
материалы
для руководителей
Скачать 3,2 MB
Елена Койгородова
Елена Койгородова печатает ...