Кнопка обратной связи: Готовая форма обратной связи на HTML для сайта — как вставить скрипт

Всплывающая форма обратной связи wordpress: настройка за 5 минут

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

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

• Они постоянно обновляются
• Профессиональные разработчики
• У инструментов есть интеграция друг с другом
• На русском языке

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

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

Contact form 7 в поиске

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

Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Заготовка под обратную связь

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Пример создания поля Имя

1. Выбираем Текст
2. Если обязательно для заполнения то отмечаем галочкой
3. Уникальный идентификатор, оставляем без изменения
4. Значение, которое отображается по умолчанию, что нужно ввести
5. Если отметить чекбокс, то название поля будет внутри
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Код поле добавления имени

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Панель инструментов

Делаем по аналогии, что получилось.

Готовый код

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Сохранение настроек

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

Вкладка Письмо

1. Вкладка письмо
2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
3. Тема отображается когда письмо придёт на почту
4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

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

Копируем шорткод

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

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Popup Maker

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

Название и добавление кода

Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.

Триггер

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

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

Прописываем класс

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

Остальные параметры

Не забываем нажать на опубликовать.

Публикуем

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

В запись загрузил изображение с помощью медиафалов.

Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Добавляем class к элементу

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

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

Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Рабочая всплывающая форма

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

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

Редактирование HTML в Gutenberg

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

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

Fancy box

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

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

<a href="#form_popup1">Отправить сообщение</a>
<div>
<div>
[contact-form-7 title="Всплывающая форма"]
</div>
</div>

Вставка кода в виджет

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

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

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

Показ формы связи через elementor

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

• Устанавливаем оба плагина WordPress
• В Contact form 7 создаем новую форму, настраиваем ее по инструкции
• Добавляем шорткод в новый попап Popupmaker
• Настраиваем отображение окна
• Привязываем класс к любому элементы на сайте
• Проверяем работу

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

Пожалуйста, оцените материал: Мне нравится5Не нравится1

Всплывающая форма обратной связи для WordPress

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

1. Для чего нужна всплывающая форма обратной связи?

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

Во вторых, всплывающий эффект достаточно интересно выглядит;

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

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

 

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

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

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

 

2. Устанавливаем Contact Form 7

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

Копируем название плагина Contact Form 7

Переходим в меню «Плагины» => «Добавить новый». Дальше вы можете либо скачать этот плагин с сайта разработчика, и затем загрузить его при помощи кнопки «Загрузить плагин»

Либо сразу в строку поиска ввести название плагина и нажать Enter.

Нажимаем на кнопку «Установить» и теперь активируем его.

 

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Нам нужно перейти к стандартным настройкам медиафайлов WordPress.

Заходим в пункт меню «Настройки» => «Медиафайлы».

Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.

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

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

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

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

Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»

И в поле «Текст» вставляем следующий фрагмент кода:

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться

6. Редактируем фрагмент кода вывода формы обратной связи.

Вставляем этот шоткод в код виджета вместо [ВАШ ШОТКОД] Вместо ОТПРАВИТЬ СООБЩЕНИЕ вы можете написать любой другой текст. Это текст высветится на кнопке, по щелчку на которой будет открываться всплывающая форма обратной связи. Сохраняем настройки, переходим на наш сайт, обновляем страниц, и нажимаем на нашу ссылку. Вот что у меня получилось:

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

7. Стилизация кнопки

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

/***Стили для формы обратной связи****/ .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8; /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff; /*цвет текста*/ text-decoration:none; /*убрать подчёркивание у ссылки*/ width:200px; /*ширина кнопки*/ margin:auto; /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /**Плавное появление тени у кнопки при наведении**/ .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/***Стили для формы обратной связи****/   .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8;  /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff;  /*цвет текста*/ text-decoration:none;  /*убрать подчёркивание у ссылки*/ width:200px;  /*ширина кнопки*/ margin:auto;  /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }   /**Плавное появление тени у кнопки при наведении**/   .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000;   -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

Посмотрим, что у нас получилось:

Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.

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

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

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

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

 

С уважением Юлия Гусарь

Contact us v1.3.8 — кнопка обратной связи для WordPress

Contact us – это плагин, который добавляет кнопку с функцией запроса обратной связи на сайт WordPress. Facebook Messenger, WhatsApp, Skype, Slack, Viber, Telegram, Обратный звонок, Связь по электронной почте и другие каналы всего в одной кнопке! Пусть клиенты выбирают свой любимый метод, чтобы связаться с вами одним щелчком мыши и следить за разговором в любое время и в любом месте!

Как это работает

• Этот плагин отображает анимированную кнопку «обратная связь» на каждой странице вашего сайта WordPress. Вы можете настроить положение кнопки, размер кнопки, цвет кнопки, размер меню, скорость анимации кнопок.
• Если включена функция «приглашение», приглашающие сообщения будут показаны посетителям. Вы можете добавить свой текст в окно приглашения.
• Когда клиент нажимает на кнопку, будет показано меню с каналами обратной связи.
• По умолчанию кнопка контакта отображается в правом нижнем углу страницы.
• В последнем пункте меню открывается функция формы запроса обратного звонка. Вы можете настроить цвет темы, все тексты и значки. Вы также можете отображать таймер обратного отсчета, когда клиент запрашивает обратный вызов.

Особенности плагина WordPress Contact us:

• Настройка кнопки – настройка позиции кнопки, цвета, размера, лейбла
• Настройка меню – настройка размера меню, цвета меню и цвета текста
• Элементы меню – выбор каналов связи, которые вы хотите, добавить / редактировать / удалить из элементов меню
• Пользовательский обработчик javascript – вы можете написать пользовательский элемент javascript для интеграции кнопки с виджетом live-chat
• Настройка приглашений – добавлять / редактировать / удалять подсказки
• Запрос обратного вызова – клиент может запросить обратный звонок по своему номеру телефона
• Электронная почта – при обращении посетителя через Email вы получите электронное письмо
• Интеграция с Twilio – вы можете использовать интеграцию Twilio для получения SMS, когда посетитель воспользуется обратной связью
• Запросы обратной связи в панели администратора – вы можете управлять всеми запросами в панели администратора
• Интеграция с Google reCaptcha V3 – предотвращает отправку запросов через невидимый Google reCaptcha V3
• Таймер обратного отсчета – дисплей с таймером обратного отсчета, когда клиент запрашивает обратный вызов
• Цвет темы – настройка цвета кнопки

 

https://codecanyon.net/item/contact-us-allinone-button-with-callback-request-feature-for-wordpress/22266189

https://www.upload.ee/files/9502040/contactus-v138.rar.html
https://www5.zippyshare.com/v/HFNrORxV/file.html
http://www.solidfiles.com/d/d8A7Gk7K36aeG
https://openload.co/f/XL8jRVSSNj0/contactus-v138.rar
https://uptobox.com/8r5npuko7fzd
https://userscloud.com/0uhufusii992
https://bayfiles.com/62n5pcs2b6/contactus-v138_rar
https://anonfile.com/79n9pes0b2/contactus-v138_rar
https://www.datafilehost.com/d/9ff3d1de
https://dailyuploads.net/th493250xe3w
https://sendit.cloud/vvctzifmguev
https://my.pcloud.com/publink/show?code=XZHy2K7ZEOPSf6E9ELkIkt2H86d0GbB1bMHV
https://mega.nz/#!rjJEUYwY!-mdkiq9db3YvXBzqxsAkUBOyjEptSGByNU2HYr8pnCY
https://mir.cr/9ITB4CXE

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

Кнопка обратного звонка — от А до Я

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

Принцип работы и функции обратного звонка

«Купить или не купить?», — именно с такой мыслью посетители изучают сайт интернет-магазина. Вовремя показанная фраза: «Оставьте свой номер телефона, и мы вам перезвоним» способна подтолкнуть потенциального покупателя к активным действиям. Принцип работы «обратного звонка» прост: посетитель сайта заполняет форму с обязательным указанием телефонного номера, система автоматически связывает менеджера компании и клиента, причем для обоих абонентов звонок будет входящим.

Обратный звонок

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

 

Для покупателя преимущества «обратного звонка» очевидны:

• не придется искать контакты продавца
• не нужно тратить деньги на звонок
• не нужно тратить время на дозвон и ждать, когда соединят с менеджером

Кому нужен callback

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

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

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

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

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

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

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

Реакция посетителей сайта на кнопку

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

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

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

всплывающее окно на весь экран

Такой призыв скорее заставить покинуть сайт, чем оставить свой номер.

Как не взбесить потенциального покупателя?

1. Всплывающее окно должно удержать посетителя на сайте, а не просто его проинформировать о чем-то. Удачно выбрать время показа поможет анализ записи вебвизора.
2. Не навязываться. Предложить заказать обратный звонок один раз за сессию лучше, чем каждые 30 секунд.
3. Кнопка отказа или крестик, закрывающий всплывающее окно, должны быть хорошо видны.

Как правильно настроить обратный звонок

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

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

1. Ничего изобретать не нужно – чтобы на сайте появилась кнопка, достаточно установить готовый скрипт. Универсальный скрипт устанавливается на сайт, а какой кнопку обратного звонка будет видеть посетитель, зависит от настроек.
2. В Callibri функция обратного звонка «зашита» в виджет. Так что подключить его можно только при подключении виджета. При клике на вкладку виджета посетителю предлагаются все возможные способы коммуникации, в том числе и обратный звонок. Без клика никакие кнопки не появляются и никого не раздражают.

 обратный звонок на сайте Callibri

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

3. Настроить порядок дозвона.

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

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

Вот как настройка обратного звонка выглядит в кабинете Callibri:

настройка обратного звонка в кабинете Callibri

Избавляемся от «пустых» звонков

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

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

1. Хорошая навигация сайта. Если пользователю удобно искать и находить информацию на сайте, то ему не придет в голову звонить вам; если же на сайте ничего невозможно найти, то за недостающими сведениями он обратится к менеджеру.
2. Раздел FAQ значительно облегчает пользователям жизнь. Здесь можно найти ответы на все «что, как, зачем и почему». Если цель кнопки «обратный звонок» на вашем сайте продавать, то стоит дать как можно больше исчерпывающей информации именно на сайте, чтобы посетители не отвлекали операторов дурацкими расспросами.
3. Онлайн-консультант, где можно уточнить мелкие детали. Чем больше способов коммуникации, тем чаще потенциальные клиенты будут общаться с менеджерами. По статистике большинство предпочитают общение в чате, так что если вы предоставите такую возможность, «пустых» звонков станет меньше.

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

Проблемы обратного звонка

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

• Обратный звонок не совсем обратный звонок. В этом случае после того, как человек оставил на сайте свой номер, менеджеру приходит письмо. То есть здесь задействована не автоматическая система, а просто уведомление, что клиент хочет, чтобы с ним связались. Менеджер может вовремя не увидеть письмо или просто не перезвонить. Как результат — потерянный клиент.
• Обратный звонок настроен так, что сначала система звонит пользователю, а потом менеджеру. А он сейчас говорит по другой линии, пьет чай, зависает в интернете или вообще пошел погулять, в общем не может взять трубку. Результат тот же — потерянный клиент.

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

Оцениваем эффективность «обратного звонка»

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

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

• Источник перехода
• Адрес сайта, с которого пришел посетитель
• Рекламная кампания и конкретное объявление
• Поисковый запрос
• Город
• UTM-метки
• Посадочная страница

Оценивать эффективность обратного звонка можно по нескольким критериям:

• Востребованность. Очевидно, что если вам заказывают 2 обратных звонка в месяц, то это не самый эффективный инструмент продаж.
• Конверсия. Оценивать нужно не только количество звонков, но и их качество. Поэтому стоит проанализировать, сколько обратных звонков привело к продажам. Конверсия в продажу — один из главных показателей эффективности инструмента.
• Реклама. Анализ целевых звонков позволит понять, какие рекламные площадки работают, а какие приводят пустой трафик и спамеров на сайт.
• Региональность. Откуда чаще всего заказывают обратный звонок, клиенты из каких регионов покупают у вас и какие именно товары и услуги пользуются наибольшим спросом.
• Запись обратного звонка – это ценный источник информации для анализа. Во-первых, нужно внимательно отнестись к вопросам, которые задают клиенты. Возможно, стоит оптимизировать сайт или добавить какую-то недостающую информацию. Во-вторых, можно понять потребности своей целевой аудитории. В-третьих, выявить ошибки и просчеты в организации работы компании. Например, менеджер по телевизорам начинает давать консультацию по холодильникам вместо того, чтобы переключить на профильного специалиста. 

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

Как сделать обратный звонок эффективным

• Настраивать время работы функции в соответствии с работой менеджеров.
• Выбирать режим, при котором на звонок сначала отвечает менеджер, а уже потом клиент. Да, клиент будет дольше ждать звонка, но это лучше, чем он будет держать трубку и не дождется ответа.
• Понимать, что ОЗ это просто еще один вид коммуникаций. Он не единственный и не основной. Некоторым категориям граждан он интересен. На него не надо возлагать надежды или концентрироваться, он просто должен быть и работать.
• Предлагать и другие режимы коммуникаций, которые сэкономят деньги клиента: федеральные номера 8-800 и 8-804, а также онлайн звонок.

Советуем прочитать

Кнопки обратной связи для сайта на CSS

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

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

Так реально по размеру они смотрятся.

Теперь вид с темтового сайта, где проверялся материал на работоспособность.

Приступаем к установке:

Что первое нужно сделать, то поставить шрифтовые иконки, а точнее стиль на них.

Его можно в низ сайта или вверх, чтоб на всех страницах работал.

Код

<link rel=»stylesheet» href=»//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css»>

Этот код разместить вверх сайта в самый его потолок:

Код

<div><a href=»http://zornet.ru/load/145″>  
  <div><i></i></div></a>  
  </div>  
  <div><a href=»http://zornet.ru/load/142″>  
  <div><i></i></div></a>  
  </div>  
  <div><a href=»http://zornet.ru/load/81″>  
  <div><i></i></div></a>
  </div>

CSS:

Код

.c_i-block .ib{  
  width:50px;  
  height:50px;  
  float:left;  
  color:#fff;  
  text-align:center;  
  font-size:18px;  
  line-height:50px;  
  margin-right:10px;  
}  
.bi1 {  
  background: #FE5656;  
}  
.bi2 {  
  background: #FBCD00;  
}  

.bi4 {  
  background: #00A3BB;  
}

Спасибо большое пользователю Dagada, за предоставленный материал.

Кнопка обратной связи — Tourvisor

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

Для установки данного модуля на Ваш сайт войдите в личный кабинет на сайте Tourvisor.ru и создайте модуль.

1. Кликните на пункт меню «Модули» и выберите «Кнопка обратной связи».

Или кликнув на пункт меню «Модули», выберите «Управление модулями».

Откроется список модулей, которые подключены или были подключены на Вашем сайте.

Найдите в списке модуль «Кнопка обратной связи» и нажмите кнопку «Управление».

Будет выполнен переход на страницу управления модулем «Кнопка обратной связи», где Вы можете создать новый модуль или внести изменения в установленный.

2. Для этого нажмите кнопку «Создать модуль».

3. После нажатия на кнопку «Создать модуль» откроется конструктор модуля «Кнопка обратной связи» и вкладка ОФОРМЛЕНИЕ.

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

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

Завершив настройку внешнего вида модуля, нажмите кнопку «Далее». 

4. Откроется вкладка ПАРАМЕТРЫ.

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

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

5. Определившись с полями и заголовком формы обратной связи, нажмите кнопку «Далее» и перейдите к завершающему этапу настройки модуля, на вкладку «КОД МОДУЛЯ».

Нажмите кнопку «Сформировать код».

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

Модуль «Кнопка обратной связи»создан.

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