Начало работы с виджетами
Итак, вы решили начать экономить время и автоматизировать рутинные процессы, перепоручив это умному виджету. В этом разделе мы расскажем, что сделать, чтобы быстро запустить виджет в работу и уже начать конвертировать пользователей в лидов. Поможем настроить внешний вид виджета, научим его приветствовать посетителей нужным сообщением в подходящее время.
Формула простая: привлечь -> вовлечь -> подписать -> конвертировать. С помощью связки онлайн-чата и Facebook Messenger вы сможете продолжить диалог в любое время и заключить сделку даже после того, как посетитель покинул сайт. Информация, полученная на каждом этапе коммуникации с клиентом, хранится в единой системе.
Создайте проект, чтобы начать работу с виджетом. Проект — это один сайт с различными сценариями событий и сообщений.
Введите название проекта и нажмите «Продолжить».
По умолчанию в проект будут добавлены поп-апы и виджет онлайн-чата. С помощью ползунков вы можете изменить настройки: отключить отображение онлайн-чата и/или добавить кнопку для подписки на чат-бота в Facebook Messenger, а также плавающую панель с кнопками мессенджеров.
Как создать проект только с поп-апами
Если вы хотите создать только поп-апы без виджета онлайн-чата, чат-бота Facebook и кнопок мессенджеров, оставьте все ползунки кроме «Добавить поп-апы» неактивным и нажмите «Продолжить».
Следующий шаг — установка кода на сайт.
Как создать проект с поп-апами и виджетом онлайн-чата и/или кнопками мессенджеров в плавающей панели
Если вы хотите добавить в проект виджет онлайн-чата, активируйте ползунок «Добавить и постоянно отображать на сайте виджет онлайн-чата» и нажмите «Продолжить».
Чтобы добавить плавающий блок с кнопками мессенджеров, активируйте ползунок «Добавить плавающую панель с кнопками мессенджеров».
Доступно добавление до 10 мессенджеров одновременно:
- Telegram;
- WhatsApp;
- Viber;
- Facebook Messenger;
- Instagram;
- YouTube;
- VK;
- Twitter;
- Snapchat;
- custom link (пользовательская ссылка).
Очередность кнопок можно менять с помощью перетаскивания (drag&drop).
Плавающая панель отображается на десктопах и мобильных с удобной анимацией превью на стороне клиента. После того, как ссылки на необходимые корпоративные мессенджеры будут добавлены, нажмите кнопку «Продолжить».
Следующий шаг — настройка приветственного сообщения и дизайна виджета.
В процессе настройки справа отображается предварительный просмотр виджета. Чтобы увидеть виджет в свернутом и развернутом виде, кликните на кнопку, выделенную на скриншоте ниже.
Настройте поведение по умолчанию
Выберите поведение виджета по умолчанию — то, как он будет отображаться посетителям.
Возможны три варианта:
- показать свернутый виджет;
- показать свернутый виджет с постоянным предпросмотром сообщения;
- показать развёрнутый виджет.
Позже вы сможете протестировать и проанализировать, какое поведение виджета приносит больше показов, взаимодействий и подписчиков, сравнить показатели и выбрать самый эффективный вариант.
Выберите, через сколько дней после закрытия виджета вручную система снова покажет его посетителю. На этапе настройки пользовательских сценариев вы сможете добавить условия отображения — виджет будет запускаться только после определенного целевого действия пользователя. Например, если потенциальный клиент провел на сайте 30 секунд.
Настройте стандартное приветственное сообщение
Выберите поведение виджета по умолчанию и приветственное сообщение, которое будет появляться каждый раз, пока вы не создадите триггеры.
Введите заголовок, который посетители сайта будут видеть в режиме расширенного виджета. Заголовок будет отображаться во всех сообщениях на сайте.
В поле «Сообщение по умолчанию» введите цепляющий текст, который вовлечёт пользователя в диалог — например, предложите помощь или консультацию. Потенциальные клиенты будут видеть это сообщение каждый раз, пока вы не настроите пользовательские сценарии (поп-апы).
Настройте отображение статуса операторов
Чтобы повысить вовлеченность и мотивировать посетителей сайта к коммуникации, уведомляйте пользвателей о том, доступны ли на данный момент операторы чата. Для активации опции в настройках проекта на вкладке «Настройки по умолчанию» выберите пункт «Показывать статус оператора онлайн».
После активации в развернутом виджете будет доступна информация об операторах: количество сотрудников, их аватары и текст уведомления.
Вы можете использовать шаблонный либо добавить уникальный текст уведомления для ситуаций, когда хотя-бы один оператор онлайн и когда все офлайн. Редактировать настройки и тексты могут все участники команды.
Когда пользователь начнет взаимодействовать с виджетом, к чату автоматически подключиться первый доступный оператор, а в виджет придет оповещение о том, что «Оператор N подключился к чату». Из панели можно вручную назначать ответственного за диалог либо автоматически прикреплять чат к тому сотруднику, который пишет сообщение из панели.
Выберите внешний вид и цвета виджета
Сделайте виджет уникальным и настройте его дизайн в соответствии с цветами вашей компании.
Выберите цветовую схему и расположение онлайн-чата в выделенном на скриншоте разделе.
Как добавить кнопку Facebook Messenger в свой проект
Сохраните связь с потенциальными клиентами, подписав их на чат-бота. Таким образом, посетители сайта будут сохранены в аудитории с собранной информацией. Вы сможете отправлять им рассылки и добавлять в сценарии чат-ботов.
Требования, которые важно учесть перед началом интеграции
Перед тем, как подключить бизнес-страницу:
Войдите в Facebook под личной учётной записью с правами администратора.
Важно: один проект в панели 13Chats можно подключить только один аккаунт Facebook.
На вкладке «Активные» в разделе «Бизнес-интеграции» Facebook (Настройки и конфиденциальность > Настройки > Бизнес-интеграции) не должно быть интеграций с другими сервисами мессенджер-маркетинга, например, SendPulse, ManyChat, Jivo. Это важно, чтобы избежать конфликтов.
Если вы ранее подключали интеграцию со сторонним сервисом, зайдите в аккаунт в этом сервисе (например, ManyChat) и удалите интеграцию со своей публичной страницей сначала внутри сервиса, а затем — из активных бизнес-интеграций в своем Facebook аккаунте.
Рекомендуем на время подключения бизнес-страницы Facebook к проекту 13Chats отключить VPN и блокирующие расширения в браузере.
Когда все требования выполнены, начинайте интеграцию.
Настройка интеграции бизнес-страницы Facebook с проектом 13Chats
Чтобы добавить кнопку Facebook Messenger, переместите ползунок.
Нажмите «Продолжить через Facebook» или «Обновите права доступа».
Важно: чтобы подключить бизнес-страницу, вам нужно войти под личной учётной записью с правами администратора. Эти нужно для правильной работы — чтобы все сообщения подтягивались в интерфейс 13Chats, и вы могли сразу из нашей админпанели управлять доступами модераторов. По умолчанию выбраны все разрешения, не меняйте их.
Выберите бизнес-страницы, которые хотите добавить в 13Chats.
Предоставьте необходимые разрешения. Эти нужно для правильной работы — чтобы все сообщения подтягивались в интерфейс 13Chats, и вы могли сразу из админпанели управлять доступами модераторов. По умолчанию выбраны все разрешения, не меняйте их.
Нажмите «Готово».
Выберите бизнес-страницу, которую хотите подключить к виджету.
Если вы выполнили все требования и поочередно прошли все пункты интеграции, но бизнес-страница Facebook не подключилась, обратитесь в техническую поддержку, чтобы мы проверили статус вашего подключения.
Как получить код для установки виджета на сайт
Нажмите «Получить код» и выберите подходящий тариф. Частые вопросы о тарифах и оплате собраны в этой статье.
Перейдите на вкладку «Установить код» и подпишитесь на своего чат-бота Facebook, если на предыдущих шагах вы решили добавить кнопку Facebook Messenger в свой проект. Если вы создаете проект без связки с Facebook, переходите к этому шагу.
Выберите личную страницу для подписки.
Скопируйте фрагмент кода из поля ниже.
Как установить код виджета на сайт
Вы можете вставить скрипт:
- на все страницы своего сайта, где необходим онлайн-чат, перед закрывающим тегом ;
- на все страницы своего сайта с помощью Google Tag Manager (GTM);
- в файл, подключаемый ко всем страницам (например, footer.php).
Если у вас нет доступа к админке или вы не знаете, как это сделать, отправьте код администратору сайта или программисту.
Также у нас есть подробная инструкция по установке кода виджета 13Chats на популярные CMS и конструкторы сайтов.
Добавление кода виджета с помощью GTM
В аккаунте Google Tag Manager откройте контейнер, соответствующий вашему сайту, и выберите «Добавить новый тег».
Кликните на раздел «Конфигурация тега» и во всплывающем меню выберите тип тега «Пользовательский HTML».
В поле «HTML» добавьте следующий скрипт:
<script>
var body=document.getElementsByTagName('body')[0];
var script=document.createElement('script');
script.async=true;
script.src='https://widget.13Chats.com/assets/loader.js';
script.setAttribute('data-chats-widget-id','значение ID');
body.appendChild(script);
</script>где 'значение ID' — это значение, которое вы получили на вкладке «Установить код» в настройках проекта в аккаунте 13Chats.
Проверьте правильность скрипта и проскрольте вниз для настройки триггеров, которые будут активировать тег.
Кликните на раздел «Триггеры» и выберите «All Pages».
Дайте название тегу и нажмите «Сохранить».
Отправьте изменения в рабочей области Google Tag Manager, нажав на кнопку «Отправить».
Как установить дополнительный конфигурационный скрипт для виджета 13Chats
Чтобы отрегулировать положение виджета онлайн-чата и плавающей панели с кнопками мессенджеров на каждой странице сайта, а также изменить цвет иконки и саму иконку в свернутом виджете чата и цвет хедера в развернутом виджете онлайн-чата, настройте дополнительную пользовательскую конфигурацию виджета.
Добавьте ниже основного скрипта перед закрывающим тегом асинхронный скрипт:
<script async>
document.addEventListener('chats13loaded', function() {
window.chats13.config({
primaryColor: 'HEX-код цвета',
chatPosition: {
bottom: 'значение в px',
right / left: 'значение в px'
}
custom_img_button: {
url: 'https://site.com/image.png',
hover_url: 'https://site.com/image.gif',
}
});
});
</script>где ‘primaryColor’ — это HEX-код цвета, который вы хотите задать для иконки в свернутом виджете, а также для фона заголовка виджета онлайн-чата.
‘chatPosition’ — это отступы снизу (bottom) и справа (right) или слева (left) от края страницы до виджета или плавающей панели с кнопками мессенджеров.
‘custom_img_button’ — это ссылки на пользовательское изображение в PNG, JPG или GIF, которое будет использовано вместо иконки виджета по умолчанию в свернутом виджете чата.
‘url’ — ссылка на пользовательское изображение в PNG, JPG или GIF по умолчанию.
‘hover_url’ — ссылка на пользовательское изображение в PNG, JPG или GIF при наведении.
Изменения этих опций отображаются в режиме реального времени: вы можете менять цвет и позицию виджета через JavaScript на своем сайте — и сразу видеть изменения без очистки кэша или cookies.
Как проверить правильность установки кода виджета на сайт
После того, как вставили код на сайт — проверьте, корректно ли он работает. Мы всё предусмотрели, 13Chats сделает это автоматически. Просто нажмите «Проверить установку», введите URL страницы в формате https://site.com/index.html и нажмите «Проверка».
Если вы получили статус «Установка прошла успешно», поздравляем — вы установили первый виджет.
Если система отдала статус «Доступ закрыт», не волнуйтесь: возможно, на вашем сайте стоит блокирующий JavaScript, который не дает провести проверку, но никак не влияет на отображение виджета онлайн-чата или поп-апов на вашем сайте.
Если инструменты 13Chats не отображаются, обратитесь к администратору сайта или напишите в техническую поддержку. Возможно, у вас стоит запрет на выполнение сторонних скриптов или настроена Content Security Policy (CSP).
Вы можете отключить виджет на сайте в любое время. Для этого перейдите на панель сообщений сайта и переместите ползунок.
Как настроить запрос email или номера телефона, если оператор не отвечает
Вы можете настроить запрос email или телефона пользователя в диалоге при отсутствии ответа оператора дольше определенного времени — от 0 сек до 3 минут. Используйте стандартный текст запроса или отредактируйте в соответствии с тональностью бренда (tone of voice).
Также вы можете добавить ссылку на условия использования и правила обработки персональных данных с индивидуальной подписью.
Следующий шаг — создание поп-апов, чтобы обращаться к пользователям в нужное время с наиболее подходящим сообщением.
Обновлено: 17.02.2022
Loading...