1. Главная
  2. Документация
  3. Установка чат-виджета на сайт

Установка чат-виджета на сайт

Код вставки, внешний вид, форма перед чатом, домены и письма посетителю.

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

Шаг 1. Подключите виджет

  1. Откройте «Настройки компании» -> «Интеграции» и выберите вкладку «Виджет на сайт».
  2. Нажмите «Подключить виджет».

На странице появятся блок «Код для сайта», ключ виджета и карточки настроек.

Шаг 2. Поставьте код на сайт

Код вставки это одна строка. Скопируйте её кнопкой «Скопировать» в блоке «Код для сайта». Она выглядит так (вместо слова КЛЮЧ будет ключ вашего виджета):

<script async src="https://crm.linkodium.com/wc/КЛЮЧ.js"></script>
  1. Вставьте код перед закрывающим тегом </body> на всех страницах сайта.
  2. Сохраните изменения и обновите страницу сайта: в углу появится кнопка чата.
  • Менеджеры тегов. Подойдёт Google Tag Manager или Яндекс.Тег: тег «Пользовательский HTML».
  • Tilda. Блок T123 «HTML-код» на каждой странице или в общем подвале.

Если на сайте настроен Content-Security-Policy

Если ваш сайт отправляет заголовок Content-Security-Policy, разрешите в нём адрес чата в двух директивах:

script-src https://crm.linkodium.com;
frame-src https://crm.linkodium.com;

Если директива frame-src не задана, добавьте адрес в child-src или default-src. Стили, шрифты и картинки чат с вашего сайта не загружает, поэтому другие директивы менять не нужно.

Управление с сайта

Окном чата можно управлять из кода сайта, например открывать его по своей кнопке:

LinkodiumChat('open')
LinkodiumChat('close')
LinkodiumChat('hide')
LinkodiumChat('show')
LinkodiumChat('prefill', {name: 'Анна', email: 'anna@example.ru'})

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

Шаг 3. Проверьте

  1. На странице виджета нажмите «Открыть чат для проверки»: чат откроется на отдельной странице, даже если код на сайт ещё не поставлен.
  2. Напишите сообщение. Оно появится в разделе «Чаты», а в разделе «Заявки» новая заявка. Источник заявки по умолчанию называется «Виджет на сайте».
  3. Ответьте из CRM и убедитесь, что ответ виден в окне чата.
  4. Откройте свой сайт и проверьте, что кнопка чата на месте. В карточке «Сайты» в списке «Виджет замечен на:» появится адрес сайта.

Настройки виджета

Все настройки ниже находятся на той же странице. После изменений нажмите «Сохранить настройки виджета».

«Внешний вид»

ПолеЧто задаёт
«Название в заголовке чата»Заголовок окна. Если пусто, показывается «Чат».
«Цвет»Основной цвет виджета. Если текст на таком цвете плохо читается, CRM предупредит.
«Положение кнопки»«Справа внизу» или «Слева внизу», а также «Отступ снизу, пикселей».
«Приветствие в окне чата»Текст, который посетитель видит в открытом окне до первого сообщения. В переписку не сохраняется.
«Имя оператора»Например: «Анна, менеджер». Если пусто, в шапке только название.
«Фото оператора»JPEG, PNG или WebP до 1 МБ, лучше квадратное. Кнопки «Загрузить фото» и «Удалить фото».
«Текст в нерабочее время»Показывается в окне чата вне рабочего времени, если в карточке «Канал» включён ответ в нерабочее время.

Справа от полей расположен предпросмотр: он сразу показывает, как будет выглядеть окно.

«Форма перед чатом»

Для каждого из полей «Имя», «Телефон» и «Email» выберите: «Не спрашивать», «Необязательно» или «Обязательно». Поля появятся над полем ввода до первого сообщения посетителя. Имя, телефон и email попадут в заявку.

  • «Уведомление под полем ввода»: текст о данных виден под полем ввода.
  • «Галочка согласия перед первым сообщением»: посетитель должен отметить согласие, прежде чем написать.
  • «Не показывать»: CRM предупредит, что без уведомления сбор данных посетителей может нарушать 152-ФЗ.

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

«Файлы»

Галочка «Разрешить посетителям отправлять файлы» и предел «Размер файла до»: 5, 10 или 25 МБ. Посетитель может прислать картинки (JPEG, PNG, GIF, WebP, HEIC), PDF, документы Word, Excel, PowerPoint, OpenDocument, RTF, TXT и CSV. Файлы занимают место в хранилище компании.

«Письма посетителю»

Галочка «Сообщать посетителю об ответе по email». Если посетитель оставил email, ушёл с сайта и не прочитал ответ в течение 3 минут, ему придёт письмо со ссылкой на переписку. Письма уходят не чаще раза в 30 минут, текст ответа в письмо не попадает.

Чтобы письма работали, включите поле «Email» в карточке «Форма перед чатом». Посетитель может отписаться от писем по ссылке в письме.

«Сайты»

  • «Любой сайт»: виджет работает на любом сайте, где стоит код.
  • «Только перечисленные сайты»: на других сайтах чат не откроется. Впишите сайты по одному в строке. Поддомены укажите отдельно или так: *.site.ru.

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

«Канал»: автоответы и расписание

Карточка «Канал» у виджета такая же, как у ботов: «Источник заявок», «Менеджер канала», «Приветствие новому клиенту», «Ответ в нерабочее время», «Расписание работы» и «Просить номер телефона». Она описана на странице Автоответы и права.

Если ответ в нерабочее время включён, вне расписания в шапке окна чата вместо «Мы на связи» показывается «Сейчас не в сети».

Что видно о посетителе

В разделе «Чаты» в шапке переписки показываются сведения о посетителе: «На сайте сейчас» или время последнего визита, страница, с которой он пишет, email, источник, устройство и отметка о согласии на обработку данных.

Блокировка посетителя

Если в чат пишет спамер, администратор может его заблокировать:

  1. Откройте переписку в разделе «Чаты».
  2. Нажмите кнопку с тремя точками («Действия с перепиской») и выберите «Заблокировать посетителя».
  3. Подтвердите действие.

Новые сообщения заблокированного посетителя не попадают в CRM, при этом сам он о блокировке не узнаёт. В списке у переписки появится пометка «Заблокирован», а ответить такому посетителю нельзя. Вернуть всё обратно можно пунктом «Разблокировать посетителя» в том же меню.

Перевыпуск ключа

Ключ виджета входит в код вставки. Если код попал на чужой сайт или вы хотите, чтобы старый код перестал работать, выпустите новый ключ.

  1. На странице виджета нажмите «Выпустить новый ключ» и подтвердите.
  2. Скопируйте новый код из блока «Код для сайта».
  3. Замените код на всех страницах сайта.
Пока вы не замените код, чат на сайте работать не будет. Ссылки «Открыть переписку» в уже отправленных посетителям письмах тоже перестанут работать.

Кнопка «Выйти на всех устройствах» в профиле ключ виджета не отзывает: ключ принадлежит компании.

Отключение виджета

Нажмите «Отключить виджет» и подтвердите. Кнопка чата исчезнет с сайта, переписка сохранится. Вернуть виджет можно кнопкой «Включить виджет».