%d0%9c%d0%b0%d1%80 %d0%9f%d0%b0%d1%80%d1%84%d0%b5%d0%bd%d0%be%d0%b2%d0%b0 %d0%9d%d0%b0%d1%81%d1%82%d1%8f

Анастасия Парфенова

10.11.2020

ic eye

731

«Напишите нам»: как сделать и добавить на сайт кнопки мессенджеров и соцсетей

Хотите уводить клиентов с сайта в переписку с вашей компанией в WhatsApp, Viber, Facebook, других соцсетях и мессенджерах? Отлично, вы по адресу. В этой статье мы разберем множество разных способов установить кнопки соцсетей и мессенджеров на сайт: напрямую в код, через конструкторы, виджеты, агрегаторы — выбирайте то, что удобнее для вас.

Для чего нужны кнопки соцсетей и мессенджеров на сайте? 

Немного теории.

Кнопки помогают увеличить количество обращений: клиенту не нужно звонить или ждать ответа на сайте. Он пишет в привычный ему мессенджер и получает быстрый доступ к разговору с вашим менеджером.

А вы взамен получаете гарантированный доступ к вниманию клиента в любое время. Ведь в мессенджере он всегда на связи. Так вы можете:
  • увеличить количество повторных обращений, потому что диалог с компанией отображается в общем списке чатов и остается на виду,
  • получить новых клиентов по «рекомендации» — когда пользователь посылает ответы компании другу или в общий чат, а потом они обращаются в компанию отдельно. Это нельзя измерить точно, но такие случаи тоже исключать нельзя.
Например, это может сработать в доставке пирогов. Допустим, молодой маме нужен пирог на чаепитие в школе ребенка и она находит в поиске сайт пекарни. Видит, что можно написать в WhatsApp: 
Добавьте на сайт кнопку whatsapp и других площадок, чтобы клиенты могли связаться через мессенджеры
Добавьте на сайт кнопку whatsapp и других площадок, чтобы клиенты могли связаться через мессенджеры

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

Плюсы и минусы иконок мессенджеров и соцсетей на сайте

Сначала рассмотрим положительные моменты:
  • Вы сразу же получаете контактные данные потенциальных клиентов. Их можно использовать для создания аудиторий ретаргетинга и look-alike аудиторий. 
  • В мессенджерах вы можете запустить рассылку с акцией или спецпредложением — ее получат пользователи, которые начинали диалог с компанией.
  • Способов связи на сайте становится больше и пользователи могут выбирать удобный канал коммуникации, у них формируется позитивное первое впечатление от компании.
  • В итоге вы получаете больше обращений и продаж.
Недостаток у этого инструмента тоже есть: пользователям нужно отвечать. Культура общения в мессенджерах предполагает быстрые ответы. Лучше всего отвечать в течение нескольких минут. Как организовать этот процесс, мы расскажем дальше.

Как добавить кнопки на сайт?

Есть несколько способов — сложных и не очень.

Установить кнопки напрямую в html-код сайта

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

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

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

Конечно, вы можете написать код самостоятельно. Есть шаблоны и инструкции, приводим несколько в качестве примера:

Как установить кнопки через Google Tag Manager, если нет доступа к коду сайта?
Если у вас нет доступа для редактирования исходного кода, но на сайте установлен Google Tag Manager, вы можете добавить новые элементы интерфейса с помощью тега «Пользовательский HTML». 

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

Заметим только, что такое решение нельзя использовать как постоянное. Расширения для блокировки рекламы иногда блокируют и GTM, то есть часть посетителей сайта просто не увидит ни иконки соцсетей, ни другие элементы, которые вы встроили таким способом. Кроме того, чем больше элементов вы добавите в контейнер, тем ниже будет скорость загрузки вашего сайта. 

Вы можете добавить новые элементы в интерфейс сайта через Google Tag Manager, чтобы протестировать гипотезу и проверить, как реагируют пользователи. Но увлекаться этим не стоит.

Использовать официальные плагины и виджеты

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

Плагины нужно установить на сайт в соответствии с инструкцией в официальной справке соцсети.

Плагины Facebook
Эта площадка предлагает два варианта:
  • Плагин чата для сайта — он выглядит и работает как виджет онлайн-чата, пользователь может написать сообщение, не уходя с сайта. Но фактически переписка будет происходить в Facebook Messenger и вся история останется в нем.
  • Плагин «Отправить в мессенджер». В этом случае диалог с компанией открывается в новой вкладке браузера и происходит уже в интерфейсе мессенджера. 

Виджеты ВКонтакте
Здесь тоже два варианта, по аналогии:
  • «Сообщения сообщества» — виджет, который работает как онлайн-консультант для сайта. Пример реализации вы можете найти в рекламном кабинете ВКонтакте.
  • «Напишите нам» — виджет, который работает как кнопка на сайте. Пользователи направляется в диалог с компанией в соцсети. Диалог также открывается в новом окне или в приложении.
Чтобы добавить на сайт официальный плагин Facebook или подключить виджет ВКонтакте, вам также понадобятся знания JavaScript и доступ в код сайта.

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

Как добавить кнопки мессенджеров и соцсетей на Tilda

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

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

Например, так вы сможете добавить ссылку на WhatsApp:
Вы можете добавить на сайт в тильда иконку любой соцсети, даже если нет готовой иконки, например, кнопку whatsapp
Вы можете добавить на сайт в тильда иконку любой соцсети, даже если нет готовой иконки, например, кнопку whatsapp

В Tilda иконки и кнопки придется настраивать отдельно для каждой страницы.

В каких блоках Tilda предусмотрены иконки соцсетей и мессенджеров?
  1. Шапка сайта. Для этого выбирайте блоки из категории «Меню», в некоторых блоках предусмотрены иконки соцсетей.
    Вы можете добавить ссылки на соцсети в шапку сайта, для этого в Tilda нужно выбрать блок меню с иконками
    Вы можете добавить ссылки на соцсети в шапку сайта, для этого в Tilda нужно выбрать блок меню с иконками

    Меню можно закрепить, тогда кнопки всегда будут на экране пользователя:
    В настройках меню сайта в тильда вы можете закрепить его на экране, чтобы иконки соцсетей всегда были видны
    В настройках меню сайта в тильда вы можете закрепить его на экране, чтобы иконки соцсетей всегда были видны
  2. Подвал сайта. Это типичное расположение. Пользователи уже привыкли, что ссылки на соцсети и другие контактные данные можно найти в самом низу.
    Добавьте иконки соцсетей и мессенджеров в подвал сайта, чтобы посетители знали, где искать ссылки
    Добавьте иконки соцсетей и мессенджеров в подвал сайта, чтобы посетители знали, где искать ссылки
  3. Раздел «Контакты». Этот блок обычно располагается на последнем экране, сюда также добавляют карту, если есть офлайн-представительство.
    На сайте в конструкторе тильда вы можете добавить кнопки соцсетей в блок контакты
    На сайте в конструкторе тильда вы можете добавить кнопки соцсетей в блок контакты

    Также вы можете сделать отдельную страницу «Контакты» и добавить ссылку на нее в меню сайта. Тогда контактная информация будет условно доступна в любое время — посетители с первых секунд на сайте будут знать, где можно найти все данные.
  4. В отдельном блоке. Для этого выбирайте шаблон из категории «Соц.сети»:
    В Tilda есть отдельная категория блоков "Соцсети", там есть и кнопки для ссылок на аккаунт и кнопки шеринга
    В Tilda есть отдельная категория блоков "Соцсети", там есть и кнопки для ссылок на аккаунт и кнопки шеринга

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

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

Как установить кнопки соцсетей и мессенджеров на Wordpress

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

Плагин, который поддерживает одновременно 7 каналов коммуникации, нужно просто указать ссылки в настройках:
Скриншот настроек плагина Ninja Team Support All-In-One для WordPress
Скриншот настроек плагина Ninja Team Support All-In-One для WordPress

Можно изменить последовательность иконок и скрыть те, которые вам не нужны. В результате вы получите виджет, который объединяет все способы связи:
Плагин Ninja Team Support All-In-One для WordPress обединяет семь способов связи для сайта
Плагин Ninja Team Support All-In-One для WordPress обединяет семь способов связи для сайта

Facebook Messenger for WordPress
Плагин от того же издателя, что и предыдущий, но здесь диалог можно вести только в мессенджере Facebook. Можно настроить текст и цвет виджета, добавить кнопку в карточку товара и выбрать страницы, на которых должен работать плагин.
Скриншот настроек плагина NinjaTeam Facebook Messenger для WordPress, который позволяет добавить кнопку facebook
Скриншот настроек плагина NinjaTeam Facebook Messenger для WordPress, который позволяет добавить кнопку facebook

На сайте будет отображаться иконка мессенджера, которую посетители смогут перемещать как угодно, а также кнопка в карточке товара. Если пользователь захочет написать сообщение, появится всплывающее окно с формой:
Демо плагина NinjaTeam Facebook Messenger для WordPress, так выгладит кнопка facebook на сайте
Демо плагина NinjaTeam Facebook Messenger для WordPress, так выгладит кнопка facebook на сайте

WhatsApp Chat WordPress
Еще один плагин, который поддерживает только одну соцсеть, но здесь довольно детализированные настройки. Кроме параметров отображения виджета на сайте, вы можете указать точный график работы и задать описание для онлайн и офлайн-режима:
В настройках плагина  NinjaTeam WhatsApp Chat для WordPress можно задать время работы кнопки WhatsApp на сайте
В настройках плагина NinjaTeam WhatsApp Chat для WordPress можно задать время работы кнопки WhatsApp на сайте

Кроме того, вы можете добавить несколько аккаунтов в WhatsApp с разным графиком работы:
В плагине NinjaTeam WhatsApp Chat для WordPress можно добавить несколько операторов с разными графиками работы
В плагине NinjaTeam WhatsApp Chat для WordPress можно добавить несколько операторов с разными графиками работы

В виджете на сайте будут отображаться все операторы, даже те, кто не в сети. А в карточках товаров список операторов, которые сейчас онлайн:
Пример отображения кнопки WhatsApp на сайте WordPress, которую добавили через плагин NinjaTeam WhatsApp Chat
Пример отображения кнопки WhatsApp на сайте WordPress, которую добавили через плагин NinjaTeam WhatsApp Chat

Easy VKontakte Connect
Плагин, который позволяет связать ваш сайт на Wordpress и сообщество ВКонтакте. Включает множество инструментов: авторизация через ВКонтакте, комментарии, кнопки, чтобы поделиться контентом в соцсети, а также виджеты для коммуникации с посетителями сайта: «Сообщения сообщества» и «Напишите нам». 

Плагин, с помощью которого можно добавить на сайт иконки соцсетей — никаких раскрывающихся форм: 
С помощью плагина Social Media Icons Widget вы можете добавить социальные кнопки на сайт WordPress
С помощью плагина Social Media Icons Widget вы можете добавить социальные кнопки на сайт WordPress

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

Если вы раньше не устанавливали плагины на ваш сайт, воспользуйтесь этой инструкцией.

Использовать бесплатные виджеты кнопок соцсетей и мессенджеров

Есть готовые решения, чтобы установить на сайт кнопки разных соцсетей и мессенджеров, при этом не вносить серьезные правки в код сайта, а добавить один скрипт. При этом такой скрипт обычно работает на всех типах сайтов и CMS. 

Здесь мы собрали несколько примеров таких сервисов.

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

Как создать виджет в GetBtn?
  1. Настроить главную кнопку: выбрать иконку и цвета. Здесь же можно включить анимацию.
    В бесплатном виджете кнопок для сайта GetBtn вы можете настроить индивидуальный дизайн главной иконки
    В бесплатном виджете кнопок для сайта GetBtn вы можете настроить индивидуальный дизайн главной иконки
  2. Настроить внешний вид иконок соцсетей и мессенджеров. Можно использовать шаблоны или собрать кнопки самостоятельно:
    Настройте внешний вид иконок соцсетей и мессенджеров или используйте шаблоны, чтобы добавить ссылки на сайт
    Настройте внешний вид иконок соцсетей и мессенджеров или используйте шаблоны, чтобы добавить ссылки на сайт
  3. Задать параметры размещения виджета на сайте. Здесь же можно изменить направление открывания списка и изменить размер кнопок.
    В бесплатном виджете GetBtn можно менять размер социальных кнопок для сайта и расположение на странице
    В бесплатном виджете GetBtn можно менять размер социальных кнопок для сайта и расположение на странице
  4. Когда закончите все настройки, введите email-адрес и система сгенерирует код, который нужно добавить на сайт:
    GetBtn автоматически сгенерирует код в соответствии с настройками дизайна кнопок соцсетей, добавьте его на сайт
    GetBtn автоматически сгенерирует код в соответствии с настройками дизайна кнопок соцсетей, добавьте его на сайт
Готово! Добавьте код на сайт и проверьте, что виджет работает.

Frisbie — условно бесплатный виджет кнопок соцсетей для сайта. Действительно, в сервисе есть бесплатный тариф, но он позволяет добавить только три кнопки: Whatsapp, Телефон и Почту. Платный тариф — 59 рублей в месяц. Но вы сможете передавать клики по кнопкам в системы веб-аналитики. А визуально виджет похож на GetBtn.

Spikmi Messenger — бесплатный виджет, в котором собраны кнопки для связи через мессенджеры. Отличительная особенность этого сервиса — расположение кнопок:
Пример настроек бесплатного виджета кнопок соцсетей и мессенджеров для сайта Spikmi Messenger
Пример настроек бесплатного виджета кнопок соцсетей и мессенджеров для сайта Spikmi Messenger

Как не пропустить сообщения, если клиенты пишут в разные соцсети и мессенджеры одновременно?

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

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

Можно поручить соцсети менеджерам, но они тоже люди: могут пропустить уведомление и не ответить на сообщение. А еще сотрудники будут отвлекаться на личные переписки. И контролировать рабочий процесс не получится — зона ответственности слишком размыта.

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

Что делать? 🙀

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

Так можно работать через агрегатор Callibri:
  • видеть отвеченные и неотвеченные сообщения из всех соцсетей и мессенджеров в одном окне,
  • проставлять ответственного менеджера и проверять качество его работы,
  • собирать и хранить базу клиентов — все обращения будут в отчете, а контакты клиентов — в мини-CRM.
Дать доступ можно неограниченному количеству менеджеров. Это безопасно — никто из них не сможет случайно запостить в официальный аккаунт что-нибудь не то.

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

Или кнопки можно не настраивать совсем, а установить на сайт виджет Callibri. Это онлайн-консультант, в котором есть встроенные ссылки на соцсети и мессенджеры. И отдельный таб «Контакты» — на него можно добавить не только соцсети, но и карту: 
В МультиЧате Callibri есть встроенные кнопки ссылки на соцсети и мессенджеры
В МультиЧате Callibri есть встроенные кнопки ссылки на соцсети и мессенджеры

Еще одно преимущество таких сервисов — идентификация пользователя. Если сегодня клиент обращается, например, через Facebook, а завтра — через Telegram, система позволяет связать эти обращения между собой.

Кстати, попробовать агрегатор и виджет Callibri можно бесплатно: тестовый период длится 14 дней. Пользуйтесь!
Попробовать бесплатно

Хотите узнать больше об интернет-маркетинге? Подпишитесь на рассылку Callibri. Отправляем статьи и вебинары на вашу почту по вторникам. Форма справа 👉

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

Поделиться: