Как добавить чат-бот с ИИ на сайт

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

Что понадобится

• Сайт, куда можно вставить код. Подойдут Тильда, WordPress, Битрикс, Wix и самописные сайты.
• Материалы для ответов. Для начала хватит самого сайта. Документы, условия доставки или ответы на частые вопросы можно добавить позже.
• Аккаунт Leadseed. Бесплатного тарифа достаточно, чтобы всё настроить и проверить. Карта не нужна.

Чем ИИ-агент отличается от обычного чат-бота

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

ИИ-агент понимает вопрос, написанный своими словами, и отвечает по вашим материалам. Сценарий на каждый случай ему не нужен. Если ответа в материалах нет, агент не станет его придумывать.

Шаг 1. Создайте агента и укажите сайт

Зарегистрируйтесь в Leadseed и создайте агента. Откроется мастер. На экране «Начнём со ссылки» введите адрес в поле «URL вашего сайта» и нажмите «Продолжить».

Leadseed загрузит страницы сайта, соберёт ссылки и подберёт цвета бренда. Обычно это занимает несколько минут. Если сайта пока нет, нажмите «Настроить вручную» и добавьте материалы сами.

Шаг 2. Добавьте то, чего нет на сайте

На шаге «Источники обучения» агенту можно дать дополнительные материалы. Источники бывают четырёх видов.

• Файл. Документы в PDF, DOC, DOCX и TXT, например договор или каталог.
• Текст. Любой текст, например условия доставки или правила акции.
• Ссылки. Отдельные страницы сайта, которые агент должен знать.
• Q&A. Готовый ответ на конкретный вопрос, когда важна точная формулировка.

Агент отвечает только по сайту и этим материалам. Чем они полнее, тем точнее ответы. Подробнее о каждом виде источников в разделе Источники.

Шаг 3. Настройте внешний вид

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

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

Шаг 4. Проверьте ответы

После создания откроется Плейграунд. Это тестовое окно, где агента можно спрашивать до того, как его увидят клиенты.

Задайте 10–15 вопросов, которые клиенты задают чаще всего. Например, сколько стоит услуга, как до вас добраться и есть ли доставка. Если ответ неточный, добавьте этот вопрос и правильный ответ в источник «Q&A».

Шаг 5. Скопируйте код чата

1. Откройте «Каналы» и на карточке «Чат-виджет» нажмите «Управление».
2. Перейдите на вкладку «Встраивание».
3. В блоке «Установка виджета» нажмите «Копировать».

Код выглядит так, только вместо многоточия стоит номер вашего агента.

<script src="https://leadseed.ru/widget.js" data-agent-id="…"></script>

У каждого агента свой код, поэтому всегда копируйте его из кабинета. В «Каналах» в блоке «Установка на сайт» есть короткие инструкции для Тильды, WordPress и Битрикса, уже с кодом вашего агента.

Шаг 6. Вставьте код на сайт

Код нужно добавить на все страницы сайта, лучше всего перед закрывающим тегом </body>. Ниже инструкции для популярных платформ.

Тильда

В Тильде код для всех страниц вставляется в <head>. Чат Leadseed работает и оттуда.

1. Откройте «Настройки сайта» и перейдите в раздел «Вставка кода».
2. Вставьте строку в поле «HTML-код для вставки внутрь head» и сохраните.
3. Переопубликуйте все страницы сайта. Без этого код на них не появится.

WordPress

У Leadseed есть свой плагин для WordPress. С ним код вставлять не нужно.

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

Если ставить наш плагин не хочется, строку кода можно добавить через бесплатный плагин WPCode. В меню админки откройте Code Snippets → Header & Footer, вставьте строку в поле Footer и нажмите Save Changes.

Битрикс

1. Откройте «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайтов».
2. Откройте для редактирования шаблон, который использует сайт.
3. Найдите в коде шаблона закрывающий тег </body> ниже метки #WORK_AREA# и вставьте строку перед ним.
4. Сохраните шаблон.

Если сайт ведёт разработчик, проще отправить строку ему. Для него это правка на пару минут.

Другие сайты

В конструкторах сайтов ищите вставку своего кода на все страницы. Такой раздел обычно называется «Вставка кода», «HTML-код» или Custom code. На самописном сайте добавьте строку в общий шаблон страниц перед </body>.

Шаг 7. Проверьте чат на сайте

Откройте сайт в новой вкладке. В углу страницы должна появиться кнопка чата. Задайте вопрос и убедитесь, что агент отвечает.

Если кнопки нет, проверьте по порядку.

• Обновите страницу без кэша, например сочетанием Ctrl+F5.
• В Тильде убедитесь, что страницы переопубликованы после вставки кода.
• Если на вкладке «Встраивание» включены «Только определённые домены», ваш домен должен быть в списке «Разрешённые домены».
• Строка кода вставлена целиком, вместе с data-agent-id.

Что настроить дальше

Чат уже отвечает, но пользы будет больше, если включить ещё три вещи.

• Сбор контактов. Агент попросит имя и телефон у тех, кто готов оставить заявку. Подробнее в разделе Сбор лидов.
• Передача сотруднику. Сложные вопросы агент переведёт в хелпдеск, и сотрудник ответит клиенту в том же окне. Подробнее в разделе Перевод на оператора.
• Разбор диалогов. Раз в неделю смотрите, о чём спрашивали клиенты, и дополняйте материалы. Подробнее в разделе Логи чатов.

Если вам нужен чат, где отвечают и ИИ, и сотрудники, посмотрите, как устроен чат для сайта с ИИ и операторами.