Кнопка заказать звонок: Кнопка «Заказать обратный звонок»

Кнопка «Заказать обратный звонок»

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

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

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.

О том, как настроить контактную форму можно почитать в этих статьях:

• Создание формы обратной связи
• Контактная форма с чекбоксами и выпадающим списком
• Отправка формы без перезагрузки страницы

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

Будем реализовывать такой функционал: 🙂

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

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

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:

  <a href="#modal">Заказать обратный звонок</a>

Теперь нужно создать контейнер модального окна:

<div>
    <div>
       <div> 
           содержимое модального окна
       </div>
        <a href="#close" title="Закрыть"></a>
    </div>        
</div>

Я добавил небольшую контактную форму, получилось так:

<div>
  <div>
    <p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p>
    <form name="backPhone">
       <input name="telephone" type="Tel" maxlength="20" placeholder="Введите ваш телефон" required=”required” />
       <button type="submit" form="backPhone">Получить прайс </button>
    </form>
       <a href="#close" title="Закрыть"></a>
  </div>
</div>

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

Скачать исходник

А с html разметкой — все.

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

Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность),  так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.

А на сегодня — все! Всем пока!

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

Как создать форму обратного звонка

18219

How-to

– Читать 6 минут

Прочитать позже

ЧЕК-ЛИСТ: КОНТЕНТНАЯ ЧАСТЬ — НОВЫЙ ФУНКЦИОНАЛ

Форма обратного звонка нужна для повышения конверсии сайта. С ее помощью можно проконсультировать и подвести клиента к покупке. Если на сайте нет кнопки callback, вы рискуете потерять «теплых» клиентов.

Виджет «Обратный звонок» (или call back в переводе) зарекомендовал себя как эффективный инструмент продаж в интернет-магазинах. С его помощью посетитель сайта может за несколько секунд связаться с оператором.

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

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

Сводит к минимуму отказы.

Упрощает общение продавца с покупателем.

Сохраняет контакты обратившихся посетителей.

Повышает доверие постоянных клиентов.

Подталкивает к совершению действия.

Повышает качество обслуживания.

Позволяет проводить анализ эффективности страниц.

Дает понимание того, что непонятно покупателю.

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

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

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

#1

Вставить готовый скрипт в HTML-код страницы

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

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

#2

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

В этом случае вы сами выбираете цвет и размер кнопки, определяете место ее расположения на странице и другие параметры. Одним из самых популярных сервисов среди владельцев коммерческих сайтов является Callback Hunter. Его алгоритм рассчитывает удобный момент появления кнопки обратного звонка перед каждым посетителем сайта. Тем самым виджет не раздражает человека, но ненавязчиво предлагает помощь специалиста.

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

Скопируйте его и вставьте на сайт.

После этого виджет обратного звонка должен появиться на странице.

Использование бесплатных версий приносит ряд неудобств владельцу сайта:

Оповещение о запросе клиента на обратный звонок на почте можно увидеть не сразу.

Кнопка бывает слишком яркой, мигающей. Изменить ее дизайн нельзя.

Ограниченный функционал: минимум SMS, нет отчетов о количестве звонков.

Самая большая опасность для вас как продавца состоит в потере времени. Если вы перезваниваете через несколько секунд, то можете «дожать» клиента. Уведомление на почту не всегда приходит сразу, да и срабатывает человеческий фактор — перезвон клиенту может состояться через 5-15 минут. Для него ваша информация уже может быть неактуальной.

При установке формы «Заказать звонок» ваша основная задача — ненавязчиво предложить посетителю связаться с вами и как можно скорее перезвонить ему, если вы получили запрос. Обратные звонки оплачиваете вы согласно тарифам выбранного сервиса. Стоимость абонплаты колеблется от $10 до $30 в месяц, а каждая минута разговора стоит примерно $0,05.

Наиболее популярные разработчики форм обратного звонка: CallbackHunter, Redconnect, CallbackKiller, HookMyVisit, CallbackHub, Envybox.

Как установить кнопку обратного звонка на WordPress

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

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

Предположим, вы решили установить бесплатную кнопку callback на сайте WordPress. Зайдите на сервис и введите свой почтовый адрес, название сайта. Выберите цвет будущей кнопки и нажмите «Получить код».

Скопируйте его и вставьте в код страниц вашего сайта перед закрывающим тегом </body>. Нажмите «Обновить файл».

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

Аналогичные решения также доступны в виде плагинов и модулей для всех популярных CMS. Например, обратный звонок на OpenCart настраивается бесплатным модулем Callback Full.

Заключение

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

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

«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

Начать работу со «Списком задач»

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

Получить бесплатный доступ на 7 дней

Оцените статью по 5-бальной шкале

3.38 из 5 на основе 13 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Denys Kondak

Как создать страницу 404 ошибки

How-to

Denys Kondak

Как проверить валидность верстки

How-to

Denys Kondak

Как продлить домен и почему срок действия домена влияет на SEO

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Кнопка обратного звонка — добавьте кнопку «Запрос обратного звонка» в свой магазин

Цены

Бесплатно

Бесплатно

• До 20 лидов в месяц
• Выбор телефона, SMS и WhatsApp

Базовый

$9/месяц

• До 20 лидов в месяц (после первых 20 бесплатных лидов)
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Профессиональный

$19/месяц

• До 100 лидов в месяц (после первых 20 бесплатных лидов)
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Предприятие

$79/месяц

• Неограниченное количество лидов в месяц
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Бесплатно

Бесплатно

• До 20 лидов в месяц
• Выбор телефона, SMS и WhatsApp

Базовый

$9/месяц

• До 20 лидов в месяц (после первых 20 бесплатных лидов)
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Профессиональный

$19/месяц

• До 100 лидов в месяц (после первых 20 бесплатных лидов)
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Предприятие

$79/месяц

• Неограниченное количество лидов в месяц
• СМС оповещения в режиме реального времени
• Выбор телефона, SMS и WhatsApp
• Бесплатно, если в этом месяце 0 лидов

Все платежи выставляются в долларах США. Регулярные платежи и платежи на основе использования выставляются каждые 30 дней.

2 отзыва

Общий рейтинг

Количество на уровень рейтинга

• 50% оценок — 5 звезд

  1

• 0% оценок — 4 звезды
• 0% оценок — 3 звезды
• 50% оценок — 2 звезды

  1

• 0% оценок равны 1 звезде

23 августа 2019 г.

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

Sumo Sleep

Великобритания

21 августа 2019 г.

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

DENTAMED США

Соединенные Штаты

Время использования приложения: около 2 месяцев

Все отзывы

Об этом приложении

Запущен

15 августа 2019 г.

Языки

Английский

Интегрируется с

Телефон, смс, ватсап

Создано ShopFox

О ShopFox

Веб-сайт

5 приложений

4,8 средний рейтинг

3 года разработки приложений для Shopify App Store

Поддерживать

Отправить сообщение

support@shopfox. io

Ресурсы

Политика конфиденциальности

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

Больше таких приложений

qikify Конструктор контактных форм

4,8 из 5 звезд (442) всего 442 отзыва • Доступен бесплатный план

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

Shopify Формы

3.1 из 5 звезд (27) всего 27 отзывов • Бесплатно

Собирайте информацию о клиентах, чтобы расширить свой маркетинговый список

Мощный конструктор контактных форм

4,8 из 5 звезд (879) всего 879 отзывов • Доступен бесплатный план

Поля клиента, регистрационная форма, загрузка файла, пользовательская форма

Кнопки вызова LiveAgent — мгновенные вызовы в браузере

Что такое кнопки вызова?

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

Активная кнопка вызова

Почему важны кнопки вызова?

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

Какие типы кнопок вызова предлагает LiveAgent?

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

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

Как работает кнопка вызова?

Кнопка вызова позволяет установить:

• Звонки с ПК на ПК
• Звонки с мобильного на ПК

Звонки с ПК на ПК

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

Мобильный вызов в браузере

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

Как создать и развернуть кнопки вызова

1. Войдите в LiveAgent.
2. Щелкните Конфигурация (значок шестеренки).
3. Нажмите Вызов.
4. Нажмите на кнопки.
5. Нажмите оранжевую кнопку «Создать».

6. Просмотрите галерею и выберите нужную кнопку, нажав на нее.
7. Назовите кнопку.
8. Выберите отдел, в который вы хотите направить вызовы, сделанные с помощью этой кнопки.
9. Установите флажок Записывать вызовы, если вы хотите записывать все вызовы, сделанные с помощью этой кнопки.
10. Выберите язык, на котором должна отображаться кнопка вызова.
11. Установите флажок Активно.

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

13. Снова перейдите на левую панель настроек, щелкните Окно вызова и настройте его по своему вкусу. Не забудьте нажать Сохранить.

14.Нажмите «Интеграция» и скопируйте фрагмент кода.
15. Поместите код перед тегом кода вашего веб-сайта или попросите веб-администратора сделать это за вас.

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

Создание пользовательских кнопок вызова

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

1. Войдите в LiveAgent.
2. Щелкните Конфигурация (значок шестеренки).
3. Нажмите Вызов.
4. Нажмите на кнопки.
5. Нажмите оранжевую кнопку «Создать».
6. Нажмите «Пользовательский».
7. Выберите «из изображения» или «путем написания собственного HTML-кода».
8. Если вы решите написать собственный HTML-код, нажмите кнопку на левой панели настроек.
9. Измените HTML и CSS

10. Предварительно просмотрите и протестируйте кнопку. Если вас все устраивает, нажмите «Сохранить».
11. Щелкните Интеграция и скопируйте фрагмент кода.
12. Поместите код перед тегом кода вашего веб-сайта или попросите веб-администратора сделать это за вас.

Преимущества кнопок вызова

Размещение кнопки вызова на вашем веб-сайте может быть очень полезным как для вас, так и для ваших клиентов.

Уменьшение усилий клиентов и повышение удобства

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

Готовы повысить удовлетворенность клиентов?

Попробуйте бесплатно разместить кнопку вызова на своем сайте!

БЕСПЛАТНАЯ ПРОБНАЯ ВЕРСИЯ Запланировать демонстрацию

Повышение качества обслуживания клиентов

Создавая кнопку вызова, вы оказываете своим клиентам маленькую услугу и демонстрируете, что цените их время. Это не только улучшит их восприятие вашего бизнеса, но и улучшит качество обслуживания клиентов. Как вы уже знаете, довольные клиенты являются краеугольным камнем любого бизнеса. По сути, это то, что держит бизнес на плаву. Удовлетворенный клиент, скорее всего, сделает повторные покупки, потратит больше и останется лояльным к вашему бренду.

Возможность защиты интересов

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

Ресурсы базы знаний

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

• Настройка кнопки вызова
• Использование колл-центра LiveAgent с клиентами и приложениями для программных телефонов
• Как начать звонок с LiveAgent
• Поддерживаемые VoIP-провайдеры
• Неограниченное количество записей звонков

Готовы разместить кнопку вызова на сайте?

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

Попробуйте LiveAgent сегодня​

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

3000+ отзывов

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

Что такое кнопки вызова?

Кнопка вызова — это кнопка вызова, которая позволяет посетителям веб-сайта звонить в вашу компанию.