Интеграция с сайтом

Встраивайте функциональность AI-чата прямо на ваш сайт с помощью нашей iframe интеграции.

1

Получите код для встраивания

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

Код для встраивания 
<iframe
    src="https://filebrain.pro/project/YOUR_PROJECT_ID/iframe"
    width="100%"
    height="600px"
    frameborder="0"
    allow="clipboard-write"
></iframe>
2

Настройте внешний вид

Настройте интерфейс чата, добавив URL параметры к вашему коду для встраивания:

Параметр Описание Значение по умолчанию
backgroundColor Цвет фона страницы #ffffff
cardBackground Фон контейнера чата #fafafa
userMessageBg Цвет блока сообщения пользователя #e5e5e5
userMessageText Цвет текста сообщения пользователя #171717
aiMessageBg Цвет блока сообщения ИИ #e5e5e5
aiMessageText Цвет текста сообщения ИИ #171717
sendBtnColor Цвет кнопки отправки #a855f7
sendBtnHoverColor Цвет кнопки отправки при наведении #8b5cf6
chatHeader Заголовок окна чата Chat Assistant
welcomeMessage1 Первое приветственное сообщение Welcome to the Demo Chatbot!
welcomeMessage2 Второе приветственное сообщение How can I help you today?
aiAvatarUrl URL пользовательского аватара ИИ Значок по умолчанию
tags Теги через запятую для фильтрации контента (например, "tag1,tag2") Нет
3

Пример реализации

Вот пример настроенного интерфейса чата с тегами:

Пример пользовательского чата 
<iframe
    src="https://filebrain.pro/project/YOUR_PROJECT_ID/iframe/?backgroundColor=%23111111&cardBackground=%23fafafa&userMessageBg=%23e5e5e5&welcomeMessage1=Hello!&welcomeMessage2=How%20can%20I%20help%20you%20today?&chatHeader=Custom%20Assistant&tags=tag1,tag2"
    width="100%"
    height="600px"
    frameborder="0"
    allow="clipboard-write"
></iframe>

Или используйте только теги для фильтрации контента:

Пример с тегами 
<iframe
    src="https://filebrain.pro/project/YOUR_PROJECT_ID/iframe?tags=product,faq"
    width="100%"
    height="600px"
    frameborder="0"
    allow="clipboard-write"
></iframe>

Лучшие практики

  • Используйте шестнадцатеричные коды цветов для цветовых параметров (например, %23ffffff для #ffffff)
  • Кодируйте специальные символы в сообщениях URL (пробелы становятся %20)
  • Используйте параметр tags для фильтрации контента по определенным тегам (через запятую, пробелы не нужны)
  • Тестируйте чат на разных размерах экрана для обеспечения правильной адаптивности
  • Рассмотрите использование плавающей кнопки для переключения интерфейса чата

Нужна помощь?

Возникли проблемы с интеграцией? Наша команда поддержки готова помочь:

Связаться с поддержкой