Дайте посетителям сайта простой способ связи с вами
Социальные сети и мессенджеры являются не только привычным средством общения людей, но и эффективным способом взаимодействия бизнеса с покупателями. Последним уже непривычно звонить в компанию или писать на электронную почту, проще нажать кнопку «Связаться с нами» и оперативно получить информацию.
Люди ценят свое время и ожидают быстрого и эффективного обслуживания. Организовать его помогают гиперссылки или кнопки мессенджеров или социальных сетей на вашем сайте. В статье расскажем, как их сделать. Начнем с кнопок.
Где лучше разместить кнопки?
Годами разные специалисты экспериментировали и анализировали поведение клиентов, выявляя лучшее юзабилити сайта (от англ. usability – удобство использования). Заходя на сайт доставки японской еды, вы неосознанно ищите меню слева или сверху, «корзину» — в верхнем правом углу, а кнопку «Написать оператору» — в правом нижнем углу. И, скорее всего, меню в самом низу сайта или «корзина», находящаяся в левом нижнем углу, будут раздражать вас, ведь это неудобно и непривычно. Именно удобство и интуитивно понятный интерфейс сайта определяют его юзабилити.
Так где же разместить кнопки на ваши мессенджеры или социальные сети, чтобы пользователь быстро нашел их? Есть несколько привычных вариантов:
- в шапке сайта. Это удобно, потому что они сразу на виду и зачастую шапка фиксируется в верхней части страницы при пролистывании вниз;
- в подвале сайта. Это тоже привычное для пользователя место поиска, особенно если шапка сайта небольшая и на ней нет места для кнопок;
- сбоку. Такой вариант тоже используется, если в шапке недостаточно пространства или нет подвала. Важно, чтобы кнопки были у пользователя «перед глазами».
Как добавить кнопки социальных сетей или мессенджеров на сайт с помощью HTML?
Чтобы добавить кнопку мессенджера или социальной сети на сайт, откройте HTML-страницу и добавьте готовый скрипт:
| Мессенджер или социальная сеть | Готовый скрипт |
| <form action=”https://wa.me/номер_телефона_wa” method=”GET”>
<button type=”submit” ><img src=”ссылка_на_иконку_wa” width=”ширина_иконки” height=”высота_иконки” alt=”пример_всплывающего_сообщения“></button> </form> Пример готового скрипта: <form action=”https://wa.me/74993501337″ method=”GET”> <button type=”submit” ><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/225px-WhatsApp.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”></button> </form> |
|
| ВКонтакте | <form action=”https://vk.me/группа” method=”GET”>
<button type=”submit” ><img src=”ссылка_на_иконку_vk” width=”ширина_иконки” height=”высота_иконки” alt=”пример_всплывающего_сообщения“></button> </form> Пример готового скрипта: <form action=”https://vk.me/i2crm” method=”GET”> <button type=”submit” ><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/VK_Compact_Logo_%282021-present%29.svg/200px-VK_Compact_Logo_%282021-present%29.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”></button> </form> |
| Instagram* | <form action=”https://ig.me/m/ник_в_ig” method=”GET”>
<button type=”submit” ><img src=”ссылка_на_иконку_ig” width=”ширина_иконки” height=”высота_иконки” alt=”пример_всплывающего_сообщения“></button> </form> Пример готового скрипта: <form action=”https://ig.me/m/i2crm_official” method=”GET”> <button type=”submit” ><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/150px-Instagram_logo_2022.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”></button> </form> |
| Telegram | <form action=”https://t.me/ник_в_тг” method=”GET”>
<button type=”submit” ><img src=”ссылка_на_иконку_тг” width=”ширина_иконки” height=”высота_иконки” alt=”пример_всплывающего_сообщения“></button> </form> Пример готового скрипта: <form action=”https://t.me/i2crm” method=”GET”> <button type=”submit” ><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Telegram_2019_Logo.svg/80px-Telegram_2019_Logo.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”></button> </form> |
Важно:
В этих скриптах поле alt=”пример_всплывающего_сообщения” — это небольшая подсказка, появляющаяся при наведении курсора на иконку.
Вы можете воспользоваться нашими готовыми иконками кнопок. Просто вставьте ссылку на необходимую иконку в поле img src=”ссылка_на_иконку_ig“
Зачем нужны гиперссылки на мессенджер или социальную сеть?
Гиперссылки — еще один удобный способ быстрого перехода клиента в мессенджер или социальную сеть. В отличие от кнопок, гиперссылка может находиться во всплывающем сообщении или прямо в тексте, и клиенту не понадобится искать кнопки.
Например, если клиент прочитал информацию об условиях доставки и хочет что-либо уточнить, можно добавить всплывающее сообщение: «Есть вопросы? Пишите нам», где «Пишите нам» — это ссылка, ведущая на социальную сеть или мессенджер.
Как добавить гиперссылки с помощью HTML?
Чтобы добавить гиперссылки на мессенджеры или социальные сети, откройте HTML-страницу и добавьте готовый скрипт:
| Мессенджер или социальная сеть | Готовый скрипт |
| <a href=”https://wa.me/номер_телефона_wa“>
<img src=“ссылка_на_иконку_wa” width=“ширина_иконки” height=“высота_иконки” alt=“пример_всплывающего_сообщения”> </a> Пример готового скрипта: <a href=”https://wa.me/74993501337″> <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/225px-WhatsApp.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”> </a> |
|
| ВКонтакте | <a href=“https://vk.me/группа”>
<img src=“ссылка_на_иконку_vk” width=“ширина_иконки” height=“высота_иконки” alt=“пример_всплывающего_сообщения”> </a> Пример готового скрипта: <a href=”https://vk.me/i2crm”> <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/VK_Compact_Logo_%282021-present%29.svg/200px-VK_Compact_Logo_%282021-present%29.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”> </a> |
| Instagram* | <a href=“https://ig.me/m/ник_в_ig”>
<img src=“ссылка_на_иконку_ig” width=“ширина_иконки” height=“высота_иконки” alt=“пример_всплывающего_сообщения”> </a> Пример готового скрипта: <a href=”https://ig.me/m/i2crm_official”> <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/150px-Instagram_logo_2022.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”> </a> |
| Telegram | <a href=”https://t.me/ник_в_тг“>
<img src=”ссылка_на_иконку_тг” width=”ширина_иконки” height=”высота_иконки” alt=”пример_всплывающего_сообщения“> </a> Пример готового скрипта: <a href=”https://t.me/i2crm”> <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Telegram_2019_Logo.svg/80px-Telegram_2019_Logo.svg.png” width=”50″ height=”50″ alt=”Напишите нам!”> </a> |
Заключение
Установка гиперссылок или кнопок, ведущих в ваши мессенджеры или социальные сети, поможет клиентам быстрее получать ответы на свои вопросы, что повысит их лояльность к вашей компании.
Кроме того, все сообщения от клиентов будут попадать в вашу CRM-систему через наш сервис, ничего не потеряется.
Подключайте интеграцию соцсетей и мессенджеров с CRM-системой бесплатно на семь дней, чтобы проверить инструмент в своем деле.
Хотите получать больше клиентов из соцсетей и мессенджеров?
Подключите WhatsApp*,Telegram,ВКонтакте и Instagram* к CRM-системе.
