Главная » Hi-Tech » 20 вариантов нестандартного оформления кнопки онлайн-консультанта

20 вариантов нестандартного оформления кнопки онлайн-консультанта

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

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

TourKids — дизайн кнопки перекликается с оформлением сайта, за счёт этого она идеально вписывается в дизайн и не отвлекает внимание от информации.

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

Кнопка тёмная, не контрастирует с цветами сайта, но всё равно выделяется. 888.ru разместили сразу два виджета на главной — классическую кнопку и крупный элемент на главной странице. Дополнительный жёлтый элемент показывает, что операторы в онлайне и готовы ответить на ваш вопрос.

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

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

Небольшая кнопка с надписью Online на сайте avtodor-tr.ru показывает, что вам быстро ответят.

Изображения меняются, кнопка остаётся на месте. НПФ «Благосостояние» поместили кнопку на слайдер.

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

У посетителя сайта есть выбор способа связи. «Тинькофф Банк» спрятали в кнопку сразу три канала связи на выбор — чат на сайте, email и Telegram.

«Райффайзенбанк» тоже предлагает сразу четыре канала на выбор: чат, звонок с сайта, email, Telegram.

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

Аlltime.ru — ещё один вариант фиксированного футера c кнопкой консультанта, историей просмотров и корзиной.

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

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

  • кнопку делают менее заметной или переносят как пункт в меню;
  • кнопку размещают не на главной (самой посещаемой странице) а, например, на странице «Помощь», куда заходят посетители с вопросом или проблемой, или «Корзина», куда доходят посетители, готовые совершить покупку;
  • кнопка появляется в «авторизованной зоне» сайта — то есть пользователь увидит кнопку, только когда авторизуется.

Она не привлечет лишнего внимания, но и найти её не трудно. «Банк Хоум Кредит» разместил на сайте небольшую кнопку нейтрального цвета в шапке.

У Leroy Merlin чат есть только в «Корзине», и туда обращаются посетители сайта, готовые совершить покупку, с конкретными вопросами по доставке, наличию товаров, работе магазинов и так далее.

Только если клиент не найдёт ответ в перечне, он дойдёт до кнопки. На сайте Почты России кнопка размещена в разделе «Помощь» после списка часто задаваемых вопросов. Это сокращает количество обращений в чат.

Одна кнопка консультанта на сайте «Беларусбанка» перенесена в боковое меню, вторая — в шапку сайта.

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

Auto.ru использует лаконичную кнопку красного цвета, которая появляется только после того, как пользователь авторизовался на сайте.

Рядом со ссылкой есть дополнительный зеленый элемент, показывающий, что операторы в онлайне. «Столото» — пункт «Помощь» в боковом меню открывает чат с оператором.

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

Например, как это сделала компания ПЭК — на её сайте кнопка чата размещена рядом с калькулятором расчёта стоимости заказа. Совет пятый. Разместите кнопку рядом с элементом, который подталкивает посетителя сайта к покупке. Кроме того, это отличный способ приучать посетителей сайта к самообслуживанию. Тогда посетитель сайта после расчёта сможет задать уточняющий вопрос или сразу сделать заказ.

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

Так может выглядеть офлайн-форма

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

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

Выводы

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

  • справа внизу;
  • справа или слева у края;
  • в выдвигающемся элементе слева или справа у края;
  • наверху страницы;
  • как элемент или ссылка в меню;
  • на слайдере;
  • как крупный элемент в основной части сайта.

Оранжевым показаны варианты расположения кнопки онлайн-консультанта

Несколько советов по оформлению и расположению кнопки.

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

Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

К 2050 году половина населения Земли может остаться без пресной воды

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

ИТ-компании, банки и операторы предложили дать бизнесу право делиться персональными данными клиентов

ИТ-компании, банки и операторы предложили дать бизнесу право делиться персональными данными клиентов Об этом пишут «Ведомости». Представители бизнеса, которые работают над госпрограммой «Цифровая экономика» (МТС, «Мегафон», «Билайн», «Яндекс» и другие), предложили расширить права компаний на обработку персональных данных. Проект поправок ...