Как настроить и разместить чат WhatsApp на сайте и интеграция виджета

By admin Авг 24, 2020

Как добавить WhatsApp консультант на сайт

В нашей очередной статье мы расскажем, как компания может использовать WhatsApp для консультантов – как настроить консультации через мессенджеры, установить виджет на сайт, подключить чат-бота.

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

  • установить быструю ссылку на ваш WhatsApp на сайт;
  • просто указать номер телефона на сайте и в маркетинговых материалах для связи по WhatsApp, не устанавливая виджет;
  • установить виджет WhatsApp на сайт с помощью сервиса Chat2desk

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

Теперь объясним, почему мы так считаем, просто разобрав минусы и плюсы таких решений:

  • Если просто указать номер телефона на сайте и в маркетинговых материалах для связи по WhatsApp, не устанавливая виджет.

В таком случае клиенту для того, чтобы обратиться по номеру, необходимо записать Ваш контакт в телефонную книгу. После этого найти номер через поиск по контактам в WhatsApp и написать вам первым. Хм… Таким образом действуют только в случае большой нужды и когда нет других альтернатив. Да и если у вашей целевой аудитории есть трудности с использованием смартфона, то шансы, что к вам обратятся по єтому каналу связи, падают в разы.

  • Установить быструю ссылку на ваш WhatsApp на сайт

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

  • Установить виджет WhatsApp на сайт с помощью сервиса:

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

Клик 1:

Клик 2:

И ваш клиент попал к вам! Причем с 100% получением его контактов.

Еще плюшки:

  • В Chat Helpdesk вы сможете настроить чат-бот с ответами на типовые вопросы, ведь многие вопросы о клиентов, например, о ценах на услуги, о режиме работы, о наличии тех или иных товаров, об условиях акции часто повторяются. Это поможет разгрузить оператора, можно будет моментально отвечать на такие запросы с помощью готовых шаблонных ответов. Мессенджер WhatsApp пока что не поддерживает чат-ботов напрямую, поэтому Chat Helpdesk сейчас – единственный способ решить эту проблему и подключить к чату WhatApp автоматического консультанта. Он может работать в преднастроенном режиме – когда мы заранее знаем типовые вопросы и подготавливаем на них автоответы. Есть и второй режим – искусственный интеллект (ИИ) для чат-ботов. В этом режиме система анализирует ответы операторов на часто задаваемые вопросы и подсказывает оператору, как лучше ответить, либо отвечает за него.  В наших кейсах уже есть клиенты с 80+ одновременно работающими операторами чатов! Такой объем трафика (от 80-ти операторов) отлично подходит для анализа с помощью ИИ и автоматизации ботов.
  • Одним и тем же аккаунтом WhatsApp могут пользоваться одновременно несколько (до 500) консультантов. Можно подключить к системе консультантов, работающих удаленно в разных часовых поясах и так обеспечить круглосуточную поддержку.
  • Клиент будет общаться с оператором со своего личного номера WhatsApp, но при этом увидит только общий номер WhatsApp компании, не сможет договориться ни с кем из сотрудников напрямую – таким образом исключается ситуация, когда недобросовестные сотрудники переманивают клиентов. При этом можно реализовать индивидуальный функционал – чаты с определенным клиентом закрепить за определенным сотрудником с личным номером. То есть, когда клиент пишет на ваш общий корпоративный номер, менеджер получит сообщение на свой личный мессенджер на телефоне. При этом клиент и ваш сотрудник не будут видеть номера друг друга напрямую, а вся история переписки сохранится в сервисе.
  • История диалогов сохраняется, возможна интеграция с популярными CRM-системами.
  • Через Chat Helpdesk можно подключить не только WhatsApp, но и еще 7 популярных каналов связи: Viber, Facebook Messenger, Вконтакте, Телеграм, SMS, онлайн-чат. Ваши клиенты смогут воспользоваться любым из них, какой им кажется удобнее, при этом ваши консультанты будут видеть все диалоги из всех мессенджеров в едином интерфейсе.

Кнопка, виджет и чат WhatsApp на сайте

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

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

Если клиент первым обратился к нам через WhatsApp и, таким образом, оставил свои контакты, это уже означает высокий уровень доверия с его стороны, примерно такой же, как double opt-in – подписка на email-рассылку, когда клиент не только предоставляет свой email, но и подтверждает его. После этого можно смело отправлять ему маркетинговый контент, чтобы подогреть его интерес.

Говоря о рекламных рассылках, стоит отметить, что в сравнении с email-рассылкой у рассылок по WhatsApp тоже есть определенные преимущества:

  • Во-первых, это простота создания сообщений. Они могут быть совсем короткими, пара предложений и ссылка, больше ничего не требуется.
  • Во-вторых, это значительно более высокий процент открываемости сообщений (95-100%, т.е. почти все разосланное будет обязательно) и переходов по ссылкам (около 60%), тогда как для email-рассылок этот показатель сейчас хорошо если достигает 5%.

Соответственно, продажи тоже увеличиваются.

Требования к чату для сайта WhatsApp

К онлайн чату на сайт WhatsApp в начале поиска были такие требования:

  • Поддержка общения по SMS (на случай, если у клиента не будет доступа к интернету).
  • Поддержка большинства популярных мессенджеров – Телеграм, Скайп, WhatsApp для бизнеса.
  • Возможность вести несколько разговоров параллельно в чате на сайт в мессенджере WhatsApp.
  • Возможность интеграции WhatsApp с CRM-системой или по крайней мере хранения истории общения, интеграции help desk и WhatsApp.

Кнопка, виджет и чат WhatsApp на сайте

От идеи просто добавить кнопку ватсап на сайт отказались сразу, поскольку она ни одной из этих задач не решала.

После поисков и сравнения вариантов мы выбрали сервис https://chat2desk.com и с его помощью добавили виджет чат ВатсАп на сайт клиента.

На наше решение остановиться именно на этом приложении повлияли вот такие возможности, кроме вышеперечисленных:

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

Как разместить чат Ватсап на сайте с сервисом Chat2Desk:

1. Зарегистрируйтесь на https://chat2desk.com. После регистрации вы сможете попробовать отправлять сообщения в бесплатном демо-режиме.

2. Для добавления виджета на сайт перейдите в коммерческий режим – напишите в поддержку сервиса и получите инструкции, как это сделать. После этого вы получите логины для мессенджеров и номер телефона, выделенные именно для вас сервисом.

3. Когда находитесь в своем аккаунте, в меню слева откройте пункт “Настройки”. В нем откройте “Виджет”.

4. В самом низу страницы найдите раздел “Исходный код”, скопируйте и вставьте код на свой сайт.

5. На этом же экране настройте расположение виджета, приветственный текст, используемые мессенджеры. Включите переключатель “Виджет включен” вверху страницы.

6. Создайте операторов, настройте чат-бота и меню самообслуживания.

Готово, теперь пользователи могут общаться с операторами, делать заказы через WhatsApp.

Как подключить виджет WhatsApp на сайт?

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

Сервис Wazzup позволяет установить виджет WhatsApp на сайт без оплаты подписки. Достаточно зарегистрироваться. Именно так поступили в одной из компаний по производству печей и каминов.

Почему Wazzup?

До виджета WhatsApp на сайте компании был установлен онлайн-консультант. Такой виджет предлагал пользователям задать вопрос в окне чата, указав свои контактные данные. Ответ высылался на обозначенную электронную почту или в Messenger.

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

Компания задумалась об установке другого виджета. В это же время Wazzup запустил свой. Выбор наших клиентов склонился в его сторону по трем основным причинам:

  • это бесплатно;
  • все обращения приходят в WhatsApp компании;
  • клиентам удобно общение в WhatsApp.

Как отразилось на конверсии

До подключения виджета WhatsApp на сайт от Wazzup, компания внедрила турбо-страницы Яндекса и AMP-страницы Google. Это технологии для адаптации сайта под мобильные устройства, которые ускоряют загрузку страниц и сокращают объем данных. С их внедрением трафик с мобильных устройств резко увеличился. Виджет с подключением мессенджера стал необходимостью.

Работа с турбо-, AMP-страницами и виджетом WhatsApp на сайт положительно отразилась на конверсии. Количество обращений с сайта увеличилось на 50% по сравнению со средними месячными показателями за предыдущие 3 месяца.

Многоканальный виджет от Wazzup

Мессенджер WhatsApp стал лидером по популярности в России только в 2021 году. До него почти 3 года первенство удерживал Viber. По результатам прошлого года, в России 36 млн человек используют WhatsApp и 21 млн — Viber. Вы можете объединить оба этих мессенджера в одной кнопке, чтобы не упустить пользователей одной из них.

Кроме виджета WhatsApp на сайт в сервисе Wazzup можно подключить 14 разных мессенджеров, социальных сетей или страниц сайта. И все это к одной кнопке.

Это не альтернатива виджету WhatsApp на сайт, а дополнение. По клику на кнопку, всплывет окно с подключенными каналами. Пользователь сам выберет, куда ему удобнее написать.

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

1. Кнопка whatsapp, от сервиса Яндекс Поделиться:

Переходим на сайт Яндекс Поделиться: _https://tech.yandex.ru/share/

Ставим галочки на те кнопки, которые хотим видеть. Рекомендую до 5 штук:

И дальше всё просто — копируем готовый код, и вставляем в файл шаблона. Если пользуетесь блоговой системой вордпресс, то обычно это single.php , или подобное (зависит от шаблона).

В общем в видео покажу этот вариант.

Но есть 1 маленький минус такой кнопки. Так как её видят не только пользователи андройд устройств, но и пользователи компьютеров. Получается, что если нажать по этой кнопке, то посетитель уходит с сайта по непонятной ссылке, так как не получится запустить приложение ватсапп. Ведь ватсапп на компьютере не установлен у людей ))

А вот второй вариант более трудоемкий, но всё же инструкция хорошо расписана, и получилось её поставить в пару кликов.

2. Кнопка whatsapp для сайта от github

Переходим на сайт: _//kriskbx.github.io/whatsapp-sharing/

Переводим если ничего не понятно.

И далее клик за кликом повторяем то, что нужно. А нужно по сути скачать архив, и загрузить в корневую сайта или шаблона (я загрузил в корень сайта). После чего, перед закрывающимся тегом «боди» разместить полученный скрипт:

В котором, поменять путь до файла whatsapp-button.js(показано желтым)

То есть, тот путь, того распакованного архива, который загрузили в корень сайта (смотрите в видео, этот момент покажу).

И также, где хотите видеть кнопку Whatsapp, туда встраиваете ссылку вида:

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

По-этому, проверить можно только на мобильных устройствах.

Чат на сайте через мессенджеры — бесплатный виджет от TextBack

TextBack Виджет  —  это чат на сайте через мессенджеры. Он позволяет клиентам обратиться в вашу компанию напрямую с сайта через удобные им мессенджеры  —  ВКонтакте, Facebook, Telegram, Skype, по SMS и Viber (закрытое бета-тестирование).

Посмотрите как работает виджет:

— на сайте TextBack.ru

— VTell.ru — оператор IP-телефонии

— StudyInFocus.ru — работа и образование в Германии.

Ваши клиенты оценят виджет:

  • Это удобно — не нужно заполнять формы на сайте, предоставляться , указывать email или номер телефона.
  • Вся история переписки сохраняется у клиента, он в любой момент может вернуться к нужной ему информации.
  • Клиенту не нужно ждать, пока подключится оператор в онлайн-чате, так как ответ ему придет в мессенджер.

Почему он полезен бизнесу:

  • Инструмент для продаж и сервиса: прочитываемость сообщений в мессенджере в 3 раза выше, чем в email
  • Вы снижаете себестоимость контакта и нагрузку на ваш контактный центр — звонок обходится дороже и требует 100% внимания сотрудника, в то время как в мессенджерах можно отвечать на 5–7 чатов одновременно.
  • Ваши операторы могут отвечать клиентам из единого окна — личного кабинета TextBack. Регистрация займет 1 минуту и доступна по этой ссылке.

Ставим иконку WhatsApp на сайт

Друзья привет в этом видео я рассказываю как легко установить на сайт иконку для связи по WhatsApp.


Ссылка о которой я говорил в видео
https://faq.whatsapp.com/general/26000030/?lang=ru

Мы рассмотрим 3 способа.

1) При помощи кода выводя в записи или на странице
2) При помощи плагина WhatsApp me
3) При помощи scc поместим плагин в левый нижний угол

Все три способа элементарны и доступны пользователям с любым уровнем опыта. В видео я все очень подробно показываю.

Ранее выходило видео более старое, где я рассказываю не только про иконки Вацапа но и Скайпа Вайбера итд
Вот ссылочка на видео https://youtu.be/bYPEOwtwl58
А вот на страничку с кодом https://e-integrate.ru/kak-dobavit-na-sajt-ikonki-telefona-viber/

Первый вариант

Ссылка просто на вацап.

<текстареа wrap=»soft» class=»crayon-plain print-no» data-settings=»dblclick» readonly=»» style=»-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;»> Позвоните нам в вацап

1 Позвонитенамввацап

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

<текстареа wrap=»soft» class=»crayon-plain print-no» data-settings=»dblclick» readonly=»» style=»-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;»> Связаться по WhatsApp

1 СвязатьсяпоWhatsApp

Код выше, это код с заранее заполненным сообщением. Вместо закодированного текста вставляем свой код который Вы получите после перекодирования.

<текстареа wrap=»soft» class=»crayon-plain print-no» data-settings=»dblclick» readonly=»» style=»-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;»> Поделись с друзьями

1 Поделисьсдрузьями

Второй вариант

Используем плагин

Ссылка на плагин WhatsApp me  https://wordpress.org/plugins/creame-whatsapp-me/

Третий вариант

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

<текстареа wrap=»soft» class=»crayon-plain print-no» data-settings=»dblclick» readonly=»» style=»-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;»>

 

Пошаговая инструкция создания виджета Ватсап чата

На первом шаге регистрируемся в Hoversignal.com, при этом всё максимально просто и прозрачно – никаких банковских данных вводить не нужно, только сайт/эмейл/пароль.

Далее в административной панели выбираем виджеты «Чаты WhatsApp».

Кликаете по кнопке «Создать новый» (1).

3000 показов этого виджета – это ограничение для бесплатного тарифа.

Выбираем вашу нишу, например, коммерцию.

И выбираем шаблон с виджетом Ватсап чата.

Прямо на открывшейся странице во вкладке «Дизайн» настройте триггер WhatsApp чата, выбирая нужные параметры и редактируя текст триггера.

Здесь же задайте ваш номер Ватсапа – это, по сути, единственное изменение, которое нужно сделать.

Если вы хотите заменить текст сообщения и дизайн виджета, то просто отредактируйте его во вкладке «Содержимое».

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

Чтобы настроить показы виджета Ватсап чата, откройте вкладку «Где показывать».

Тут же вы можете указать список конкретных страниц, на которых вы хотите показывать вашим посетителям виджет Ватсап чата (2). Если галочка (1) стоит в настройках – значит, виджет будет показываться только 1 раз одному уникальному посетителю.

Если вам нужно создать свой WhatsApp виджет – кликнете при выборе шаблона на «Пустой шаблон».

Создается новый виджет точно так же, как и редактируется готовый шаблонный – просто добавляя нужный текст, номер телефона и фото. Ничего сложного!

Чтобы активировать работу WhatsApp виджета, нужно добавить скрипт Хуверсигнала в код страниц вашего сайта. Нажмите на «Установить код».

Скопируйте его и вставьте в код футера вашего сайта.

После установки вы увидите подтверждение в админке.

Ещё один вариант быстрого создания WhatsApp виджета – выбрать его из каталога шаблонов. Нужно нажать на тип виджета (1), выбрать нишу (2) и бесплатно установить понравившийся шаблон (3).

Выводы

Даже без знаний в программировании, абсолютно бесплатно можно создать Ватсап виджеты для ваших сайтов.

[spoiler title=»Источники»]

  • https://zen.yandex.ru/media/integrus.ru/kak-nastroit-whatsapp-dlia-konsultantov-5a79986300b3dd09ac40541a
  • https://zen.yandex.ru/media/integrus.ru/kak-nastroit-udobnyi-chat-na-saite-cherez-whatsapp-5a3a7ca68139ba9e538c9300
  • https://wazzup24.com/article/practical-application-of-the-whatsapp-widget-to-a-website-ru/
  • https://leadinlife.info/knopka-whatsapp-dlya-sajta.html
  • https://spark.ru/startup/textback/blog/17933/chat-na-sajte-cherez-messendzheri-besplatnij-vidzhet-ot-textback
  • https://e-integrate.ru/kak-postavit-vatsap-na-sajt-tri-sposoba/
  • https://hoversignal.com/ru/widgets/e-commerce/free-whatsapp

[/spoiler]

By admin

Related Post