Коротко: чат с ИИ ставится на сайт одной строкой кода. Скопируйте код виджета из кабинета и вставьте его перед закрывающим тегом body: в Tilda - через блок HTML-кода или настройки сайта, в WordPress - через плагин для вставки кода или файл footer.php темы, в Битрикс - в шаблон сайта. После этого откройте сайт, проверьте, что виджет появился, и отправьте тестовое сообщение.
Что понадобится
- Доступ к редактированию сайта.
- Код виджета из кабинета Kryps. Он выглядит так:
<script src="https://api.kryps.ru/embed.js" data-widget-id="ваш-id" async></script>
Скрипт загружается асинхронно и не тормозит отрисовку страницы. Виджет рисуется в изолированной области (Shadow DOM), поэтому стили сайта не ломают чат, а чат не ломает стили сайта.
Перед установкой укажите в кабинете адрес сайта: ассистент сам прочитает страницы с ценами, услугами и контактами и соберёт базу знаний. Пока вы ставите код, база уже будет готова.
Tilda
Есть два способа.
Только на нужных страницах. Откройте страницу в редакторе, добавьте блок из раздела "Другое" для вставки HTML-кода, вставьте код виджета и опубликуйте страницу. Блок лучше поставить в конец страницы.
На всём сайте. В настройках сайта найдите раздел с дополнительным HTML-кодом для вставки на все страницы и добавьте код туда. Затем переопубликуйте все страницы, чтобы изменения применились.
Если сайт на Tilda собран из нескольких проектов, код нужно добавить в каждый проект.
WordPress
Через плагин. Установите плагин для вставки кода в шапку и подвал сайта, например WPCode. В его настройках вставьте код виджета в поле для подвала (footer). Это самый безопасный способ: код не пропадёт при обновлении темы.
Через тему. В разделе редактирования темы откройте файл footer.php и вставьте код перед строкой с тегом закрытия body. Если тема обновляется автоматически, используйте дочернюю тему, иначе изменения сотрутся при обновлении.
После вставки очистите кэш, если на сайте стоит плагин кэширования.
1С-Битрикс
Код вставляется в шаблон сайта. В административной панели откройте раздел шаблонов сайтов, выберите используемый шаблон и в его разметке вставьте код перед закрывающим тегом body. Если на сайте несколько шаблонов, добавьте код в каждый.
Для сайтов на конструкторе Битрикс24 используйте поле для своего HTML-кода в настройках сайта.
Самописный сайт и другие конструкторы
Вставьте код перед закрывающим тегом body в общем шаблоне страниц. В большинстве конструкторов (Wix, Craftum, LPgenerator и других) есть поле для своего кода в настройках сайта или специальный блок HTML.
Как проверить, что всё работает
- Откройте сайт в режиме инкогнито, чтобы исключить кэш.
- В правом нижнем углу должна появиться кнопка чата.
- Откройте чат и напишите вопрос, на который знаете ответ, например о цене основной услуги.
- Проверьте ответ: он должен опираться на ваши данные. Если что-то не так, поправьте раздел в базе знаний в кабинете.
- Отправьте тестовый номер телефона и проверьте, что заявка появилась в CRM.
Удобнее проверять ассистента в кабинете: в разделе "Обучение и продажи" есть проверочный чат, который показывает, на каком этапе схемы продаж ассистент и почему он туда перешёл. Такие тестовые диалоги не создают заявок.
Подпишите блоки страницы
Ассистент Kryps видит, какой блок сайта читает посетитель, и через 15 секунд на нём сам задаёт вопрос по теме. Блоки он определяет по заголовкам секций, но надёжнее подписать их явно атрибутом data-krips-block:
<section data-krips-block="Цены">...</section>
Подходящие названия: "Цены", "Услуги", "Отзывы", "Контакты", "Вопросы". На конструкторах, где нельзя добавить атрибут, ассистент ориентируется по заголовкам.
Если проактивные вопросы на каком-то сайте не нужны, их можно отключить атрибутом data-proactive="off" в коде виджета.
Подключите цель Яндекс Метрики
Чтобы видеть заявки из чата в Метрике и использовать их в Яндекс Директе:
- Создайте в Метрике цель типа "JavaScript-событие" с идентификатором krips_lead.
- Укажите номер счётчика в кабинете Kryps в разделе "Реклама и конверсия".
- Отправьте тестовую заявку и проверьте, что цель засчиталась.
Виджет сам вызывает цель, когда посетитель оставляет контакт, и отправляет событие krips_dialog при первом сообщении. Для Google Tag Manager те же события отправляются в dataLayer.
Согласие на обработку данных
Если ассистент собирает телефон или почту, на сайте должна быть политика обработки персональных данных, а в момент сбора контакта - уведомление о согласии и ссылка на политику. Это требование 152-ФЗ. Проверьте тексты с юристом.
Частые вопросы
Замедлит ли чат загрузку сайта?
Код загружается асинхронно и не мешает отрисовке страницы. Основная часть виджета подгружается после загрузки сайта, поэтому скорость первого экрана не страдает.
Можно ли поставить чат на несколько сайтов?
Да, для каждого сайта создаётся свой виджет со своей базой знаний и сценарием. Число виджетов зависит от тарифа: от 1 на Start до 5 на Pro.
Нужен ли программист, чтобы установить чат?
Обычно нет. На Tilda и WordPress код вставляется через настройки или плагин за несколько минут. Программист может понадобиться, если сайт самописный и у вас нет доступа к шаблону страниц.
Как изменить внешний вид чата?
В кабинете настраиваются цвет, светлая или тёмная тема, название, описание и первое сообщение. Изменения применяются сразу, код на сайте менять не нужно.