Как встроить AI-агента на сайте на разных CMS

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

Timeweb Cloud запустил собственный сервис AI-агентов,, который позволяет создать и встроить интеллектуального помощника на сайт за несколько минут — без кода и сложных интеграций.

Использовать AI-агентов из Timeweb Cloud можно и по API. Агенты полностью совместимы с OpenAI API, поэтому их можно использовать в готовых nocode-платформах, например n8n. Но это тема отдельной статьи.

В этой статье разберем, что умеет AI-агент как оператор поддержки, как встроить его на Tilda и WordPress и как адаптировать внешний вид под дизайн сайта. Материал подойдет владельцам сайтов, маркетологам и разработчикам, которые хотят протестировать возможности AI-помощников на реальном проекте.

cloud

Что умеет AI-агент от Timeweb Cloud?

AI-агент — это чат-бот, работающий на основе моделей искусственного интеллекта. Он может:

• отвечать на частые вопросы пользователей,

• консультировать по товарам и услугам,

• искать информацию в собственной базе знаний,

• работать круглосуточно и на любом сайте.

AI-оператор может решать несложные вопросы от пользователей, не прибегая к помощи человека. Агент обучается на ваших материалах: можно загрузить документы, FAQ или описание услуг, чтобы ответы были релевантны именно вашему бизнесу.

Пример живого диалога:

— Здравствуйте, подскажите, сколько стоит консультация психолога онлайн?

— Стоимость — 1500 ₽ за 50 минут. Запись доступна на завтра, хотите ссылку на форму?

— А можно оплатить по карте?

— Да, принимаем Visa, MasterCard и «Мир». После бронирования вам придет ссылка на оплату.

Такой агент заменяет первый контакт, снижает нагрузку на менеджеров и повышает конверсию за счет мгновенных ответов.

Создание агента и подключение базы знаний

Timeweb Cloud сделал процесс настройки AI-агента максимально простым — все можно выполнить в несколько шагов прямо из панели управления. После создания появляется готовый код виджета, который остается лишь вставить на сайт.

Чтобы создать нового AI-агента:

1. Перейдите в раздел «AI-агенты» и нажмите «Создать».

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

3. Укажите тариф в зависимости от планируемого объема запросов. Для теста подойдет минимальный — позже его можно повысить, но уменьшить не получится.

4. Задайте промпт — описание роли и задач агента. В панели уже есть шаблон «Сотрудник поддержки» — он отлично подходит для нашей задачи.

5. Проверьте параметры, стоимость и нажмите кнопку «Заказать».

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

1. Перейдите в раздел «AI-агенты → Базы знаний».

2. Нажмите «Создать».

3. Загрузите файлы — до 100 документов размером не более 10 МБ каждый. Сюда можно подгрузить информацию о том, чем занимается ваша компания, какие услуги или товары продает. А еще можно добавить правила возврата, какими транспортными компаниями доставляете товар — в общем, все, о чем потенциально могут спрашивать клиенты.

4. Выберите тариф и задайте название базы для удобства.

5. Подтвердите создание и дождитесь окончания индексации — обычно это занимает до 10 минут.

Чтобы привязать базу знаний к AI-агенту, пройдите следующие три шага:

1. В разделе «AI-агенты» откройте нужного агента.

2. На вкладке «Управление» нажмите «Изменить» рядом с пунктом «База знаний».

3. Выберите созданную базу и сохраните изменения.

После привязки агент сможет использовать ваши материалы в ответах. Проверить работу можно в режиме «Плэйграунд» — он позволяет протестировать диалоги прямо в панели управления.

Принцип подключения через встраиваемый код

После создания агента все необходимое для установки уже готово в панели управления. В разделе «Чат для встраивания» появляется код виджета, который нужно вставить на сайт. Для этого: 

1. Перейдите на вкладку «Вставка» в разделе «Чат для встраивания».

2. Скопируйте сгенерированный JavaScript-код.

3. Вставьте его между тегами <body></body> на своем сайте.

4. Сохраните и обновите страницу — на сайте появится иконка чата.

Ниже в статье отдельно разберем, как встроить чат на сайт под управлением CMS WordPress и Tilda. 

Через настройки на странице «Чат для встраивания» можно выбрать имя, приветственное сообщение, тему оформления, цвет кнопки и позицию виджета.

На этом же этапе добавьте домен вашего сайта, где будет использоваться AI-агент, во вкладке «Домены». Иначе вашего AI-агента могли бы использовать конкуренты где угодно. 

Интеграция на WordPress

Способов добавить новые блоки на сайт Wordpress есть много, но мы рассмотрим два основных.

Через Gutenberg-редактор (без плагинов)

Инструкция подходит для версии Wordpress 6.8.3. На разных версиях названия кнопок или расположение может меняться. Если вы не можете найти, как попасть в редактор кода, воспользуйтесь способом из следующего параграфа — интеграцией через плагин. 

Обратите внимание: если интегрировать чат таким способом, то придется вставлять код чата в каждый шаблон — это может быть долго и придется иметь это в виду, когда добавляете новые страницы. Чтобы все было более универсально — воспользуйтесь способом из следующего параграфа. 

1. Авторизуйтесь в Wordpress как администратор. 

2. Перейдите на одну из страниц сайта и нажмите кнопку «Редактировать сайт».
   
   Пример интерфейса WordPress с кнопкой «Редактировать сайт».

3. Нажмите на три точки в правом верхнем углу редактора. Выберите режим «Редактор кода».
   
   Меню редактора WordPress с выбором режима «Редактор кода» для вставки скрипта AI-агента.

4. Пролистайте код страницы до конца. Вставьте заготовленный фрагмент кода из панели Timeweb Cloud — он находится на странице «Чат для встраивания», вкладка в меню справа «Вставка». Вставить код нужно до подвала сайта (обычно, последняя строка). Должно получиться так:
   
   Фрагмент HTML-кода страницы WordPress с примером вставленного скрипта AI-агента Timeweb Cloud.

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

Но в таком режиме чат будет отображаться только на одной странице. Чтобы отображался на всех, добавьте фрагмент кода с чатом во все шаблоны темы. 

Через плагин (глобально)

Если хотите, чтобы агент был доступен на всех страницах, используйте бесплатный плагин WPCode:

1. Установите и активируйте плагин.

2. В панели администратора выберите вкладку «Сниппеты кода» → «Шапка и подвал».
   
   Панель администратора WordPress с открытым разделом «Сниппеты кода» — пункт, где подключается плагин WPCode для вставки скриптов в шапку и подвал сайта.

3. Вставьте заготовленный фрагмент кода в раздел «Подвал (footer)» — этот код находится на странице «Чат для встраивания», вкладка в меню справа «Вставка». Должно получиться так:
   
   Окно вставки кода в разделе «Подвал (footer)» плагина WPCode: пример добавления скрипта AI-агента Timeweb Cloud.

4. Нажмите на кнопку «Сохранить изменения». 

Так виджет чата с AI-ассистентом будет подключаться автоматически на каждой странице сайта.

Интеграция на Tilda

В отличие от WordPress, вставить чат с AI-ассистентом на сайт можно без дополнительных плагинов. Чтобы это сделать, следуйте инструкции:

1. Перейдите на страницу проекта в Тильде.

2. Нажмите на кнопку «Настройки сайта».
   
   Страница проекта в Tilda.

3. В панели настроек выберите пункт «Еще», а далее найдите пункт «Html-код для вставки внутрь HEAD». 

4. На этом этапе Тильда может запросить подтвердить почту или телефон — это нужно сделать, чтоб появилась возможность интегрировать свой код.
   Вставьте заготовленный фрагмент кода из панели Timeweb Cloud — он находится на странице «Чат для встраивания», вкладка в меню справа «Вставка». Вставить код нужно до подвала сайта (обычно последняя строка). Должно получиться так:
   
   Раздел «Вставка кода в HEAD» в настройках сайта Tilda.

5. Сохраните изменения. После этого чат с AI-агентом будет отображаться сразу на всех страницах. 

Тестирование и кастомизация

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

Если вы получаете ошибку «Unauthorized access», когда отправляете сообщение в чат — проверьте, что тип API на странице агента в панели Timeweb Cloud выставлен «Публичный». 

Панель управления AI-агентом в Timeweb Cloud.

На вкладке «Чат для встраивания» можно кастомизировать вид чата — то есть подстроить его под дизайн вашего сайта. Можно изменить имя, подпись под именем (например, «онлайн-консультант»), приветственное сообщение цвет, шрифт, иконку и расположение иконки. Все изменения применяются сразу, без повторной вставки кода.

Как использовать агента эффективно

AI-агента можно адаптировать под разные задачи:

• Ответы на частые вопросы, расписание, доставка, политика возвратов.

• Подбор товара по характеристикам, расчет стоимости, отправка ссылки на оплату.

• Поиск по базе статей или документации.

Главное — сформировать четкий промпт и добавить базу знаний: чем лучше обучен агент, тем точнее его ответы.

Подготовили для вас выгодные тарифы на облачные серверы

Заключение

AI-агент от Timeweb Cloud — это простой способ добавить интеллектуального помощника на сайт без программирования.

Код вставляется одной строкой, интерфейс полностью настраивается через панель, а интеграция с Tilda и WordPress занимает меньше пяти минут.