Як оформити кнопку онлайн-консультанта: 20 прикладів

1. Рада 1 Кнопка повинна оптимально вписуватися в дизайн сайту за формою, розміром і квітам. Можна...
2. Рада 2
3. Рада 3
4. Рада 4
5. Рада 5
6. Рада 6
7. резюмуємо

Рада 1

Кнопка повинна оптимально вписуватися в дизайн сайту за формою, розміром і квітам. Можна налаштувати її під кольори сайту або, навпаки, зіграти на контрасті, щоб кнопка виділялася. Поширені кольору для оформлення кнопки консультанта: червоний (вважається, що він спонукає користувача до дії), жовтий, помаранчевий, зелений (показує, що ви на зв'язку і готові відповісти). Акуратніше з сірим кольором - кнопка може бути сприйнята як неактивна.

TourKids - дизайн кнопки перегукується з оформленням сайту, за рахунок цього вона ідеально вписується в дизайн і не відволікає увагу від інформації.

Xerox - на яскраву кнопку кольори логотипу з закликом почати чат складно не звернути увагу.

888.ru розмістили відразу два віджету на головній - класичну кнопку і великий елемент на головній сторінці. Кнопка темна, що не контрастує з квітами сайту, але все одно виділяється. Додатковий жовтий елемент показує, що оператори онлайн і готові відповісти на ваше запитання.

Як стати майстром наскрізний аналітики?

Наскрізна аналітика - головна магія інтернет-маркетингу і найпотужніший інструмент розвитку продажів без зростання бюджету. Впровадивши її, ви відразу зрозумієте, де клієнти губляться і що в вашому маркетингу треба поліпшити.
Хочете освоїти цю магію? Ось навчальний курс де детально пояснюють, як все працює, як впроваджувати і як використовувати на практиці.
Поспішайте дізнатися подробиці , Реєстрація скоро закриється!

Реклама

Рада 2

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

На сайті мережі торгових центрів «Мега» є невелика ненав'язлива світла кнопка біля правого краю екрана. Вона однаково розташована і в основний, і мобільної версії сайту.

Невелика кнопка з написом Online на сайті avtodor-tr.ru показує, що вам швидко дадуть відповідь.

НПФ «Добробут» помістили кнопку на слайдер. Зображення змінюються, кнопка залишається на місці.

Рада 3

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

У Tinkoff Bank кнопка чату - це розгортається віджет, в якому пропонується відразу 3 канали зв'язку на вибір - чат на сайті, email і Telegram. У користувача сайту є вибір способу зв'язку.

Райффайзен Банк теж пропонує відразу чотири канали на вибір: чат, дзвінок з сайту, email, Telegram.

В основній версії сайту інтернет-магазину LaRedoute розміщені три кнопки: онлайн-чат, допомога стиліста, замовлення зворотного дзвінка - і все це в фіксованому футере. Завдяки сірому кольору він не відволікає увагу, і відвідувач сайту може звернутися до консультанта в будь-який момент.

Аlltime.ru - ще один варіант фіксірованоого футера c кнопкою консультанта, історією переглядів і кошиком.

«Газпромбанк - Управління активами» - збоку екрана розташований висувається віджет з чотирма елементами, серед яких кнопка онлайн-консультанта.

Рада 4

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

• кнопку роблять менш помітною або навіть переносять як пункт в меню.
• кнопку розміщують не на головній (найбільш відвідуваною сторінці) а, наприклад, на сторінці «Допомога», куди заходять відвідувачі з питанням або проблемою, або «Кошик», куди доходять відвідувачі, готові зробити покупку.
• кнопка з'являється в «авторизованої зоні» сайту - тобто користувач побачить кнопку, тільки коли авторизується.

Банк Хоум Кредит розмістив на сайті невелику кнопку нейтрального кольору в шапці. Вона не приверне зайвої уваги, але і знайти її не важко.

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

На сайті Пошти Росії кнопка розміщена в розділі «Допомога» після списку поширених запитань. Тільки якщо клієнт не знайде відповідь у переліку, він дійде до кнопки. Це скорочує кількість звернень в чат.

Одна кнопка консультанта на сайті Беларусбанк перенесена в бічне меню, друга - в шапку сайту.

Yves Rocher розмістили посилання в підвалі сайту. Як правило, відвідувач сайту прокручує сторінку до футера, щоб знайти контакти компанії, тому посилання на чат там виправдана.

auto.ru використовує лаконічну кнопку червоного кольору, яка з'являється тільки після того, як користувач авторизувався на сайті.

«Cтолото» - пункт меню «Допомога» в бічному меню відкриває чат з оператором. Поруч з посиланням є додатковий зелений елемент, який показує, що оператори в онлайні.

Не зовсім очевидний варіант розміщення кнопки у БКС Брокер. Спочатку потрібно відкрити вікно для реєстрації на сайті, де і буде кнопка чату. Виходить, що кнопку побачить відвідувач сайту, готовий зареєструватися або авторизуватися на сайті, що відсіває нецільові звернення.

Рада 5

Додайте кнопку поруч з елементом, який підштовхує користувача сайту до покупки. Наприклад, як це зробила компанія ПЕК - на її сайті кнопка чату розміщена поруч з калькулятором розрахунку вартості замовлення. Тоді відвідувач сайту після розрахунку зможе поставити уточнююче запитання чи відразу зробити замовлення. При цьому кнопка ідеально вписується в дизайн сайту.

Рада 6

Налаштуйте вид кнопки на випадок, якщо у вас не буде можливості відповісти на звернення. Наприклад, якщо в якийсь момент немає жодного оператора онлайн, кнопка може змінювати колір на червоний або сірий, на ній може змінюватися напис з online на offline або інший варіант. При натисканні на кнопку налаштуйте офлайн-форму. З її допомогою відвідувач сайту відправить звернення вам на пошту.

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

Або, якщо ви знаєте, що належить наплив звернень (наприклад, перед святами або під час розпродажів), налаштуйте зникнення кнопки після певної кількості звернень в черзі. Якщо відвідувач сайту бачить, що оператор онлайн, але змушений довго чекати в черзі - це викличе негатив. Кнопка знову з'явиться, коли оператори закриють звернення в черзі. Така функція поки є у сервісів Webim і Livetex.

резюмуємо

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

• праворуч внизу;
• праворуч або ліворуч біля краю;
• в висувається елементі зліва чи справа у краю;
• нагорі сторінки;
• як елемент або посилання в меню;
• на слайдері;
• як великий елемент в основній частині сайту.

Помаранчевим показані варіанти розташування кнопки онлайн-консультанта.

Кілька порад з оформлення і розташуванню кнопки.

1. Кнопка онлайн-консультанта повинна оптимально вписуватися в дизайн вашого сайту за формою, розміром і кольором.
2. Кнопка не повинна закривати важливу інформацію на сайті ні в повній, ні в мобільній версії сайту.
3. Не варто розташовувати поруч з кнопкою чату інші динамічні елементи.
4. Щоб уникнути напливу нецільових звернень, скористайтеся одним з цих варіантів:
   • зробіть кнопку менш помітною,
   • Не ставте кнопку на головній сторінці,
   • розмістіть кнопку в авторизованої зоні сайту.
5. Додайте кнопку поруч з елементом, який підштовхує користувача сайту до покупки.
6. Налаштувати показ (або не показ) кнопки, якщо операторів немає в онлайні або вони перевантажені.

Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .