Главная » 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 Интересное!

Цифры: сколько Amazon тратит на питание и проживание для стажёров

Цифры: сколько Amazon тратит на питание и проживание для стажёров Поиск Написать Войти Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Интернет-ритейлер Amazon ежегодно принимает на летнюю стажировку в Сиэтле 900 человек. Четвёртый год подряд их ...

10 самых дорогих стартапов, основанных студентами

10 самых дорогих стартапов, основанных студентами Поиск Написать Войти Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто