Встраивание веб-приложения

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

Как работает встраивание веб-приложения

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

Виджет чат-пузыря

Ваше веб-приложение в виде плавающей кнопки — посетители нажимают её, чтобы открыть полный интерфейс

Интеграция через iframe

Ваше веб-приложение, встроенное прямо в содержимое страницы — всегда на виду и готово к работе

Управление через JavaScript

Продвинутое встраивание с собственными стилями и управлением поведением

Адаптивный дизайн

То же веб-приложение автоматически подстраивается под любой формат отображения

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

Виджет чат-пузыря

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

Параметры конфигурации

Чат-пузырь можно настроить через объект difyChatbotConfig:

window.difyChatbotConfig = {
    // Required: Your app's token from Интеллос
    token: 'YOUR_TOKEN',
    
    // Optional: Environment settings
    isDev: false,
    baseUrl: 'https://udify.app', // Auto-set based on isDev
    
    // Optional: Visual customization
    containerProps: {
        style: {
            right: '20px',
            bottom: '20px'
        },
        className: 'custom-chat-button'
    },
    
    // Optional: Interactive behavior  
    draggable: false,              // Allow users to drag the button
    dragAxis: 'both',             // 'x', 'y', or 'both'
    
    // Optional: Pre-fill user context
    inputs: {
        name: "John Doe",          // Variable names from your Интеллос app
        department: "Support"
    },
    
    // Optional: System variables for tracking
    systemVariables: {
        user_id: 'USER_123',
        conversation_id: 'CONV_456'
    },
    
    // Optional: User profile information
    userVariables: {
        avatar_url: 'https://example.com/avatar.jpg',
        name: 'John Doe'
    }
}

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

В приложении Интеллос перейдите в Опубликовать → Встроить на сайт, чтобы найти ваш уникальный токен.

Добавьте скрипт

Включите конфигурацию и скрипт встраивания Интеллос в HTML-код вашего сайта.

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

Отрегулируйте containerProps, чтобы соответствовать дизайну вашего сайта.

Проверьте работоспособность

Откройте свой сайт и попробуйте кнопку чата, чтобы убедиться, что всё работает корректно.

Интеграция через iframe

Встройте ваше веб-приложение прямо в содержимое страницы. При этом приложение отображается как неотъемлемая часть вашего сайта:

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

Зачем использовать встраивание через iframe

Всегда на виду — ваше веб-приложение сразу доступно, а не спрятано за кнопкой
Полный функционал — всё из вашего веб-приложения работает в iframe точно так же
Интеграция в страницу — отображается как родное содержимое, а не как наложение
Простая настройка — только HTML, без конфигурации JavaScript

Параметры настройки

Размер и положение:

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="400px" 
  height="500px"
  style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>

Адаптивный дизайн:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="https://udify.app/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

Выберите способ встраивания

Приложения поддержки клиентов

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

Приложения с формами и рабочими процессами

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

Демонстрации продукта

Встраивание через iframe на лендингах, чтобы посетители могли мгновенно опробовать возможности вашего ИИ. Никаких барьеров между интересом и вовлечением.

Интеграция на нескольких страницах

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

Устранение неполадок

Виджет не появляется:

Убедитесь, что токен приложения совпадает с тем, что показан в разделе Опубликовать → Встроить на сайт в Интеллос
Проверьте, что конфигурация загружается до скрипта встраивания
Поищите ошибки JavaScript в консоли браузера

Iframe не загружается:

Подтвердите, что URL веб-приложения содержит правильный токен
Убедитесь, что ваш сайт разрешает содержимое iframe (проверьте Content Security Policy)
И ваш сайт, и приложение Интеллос должны использовать HTTPS

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

Стиль кнопки по умолчанию можно переопределить с помощью CSS-переменных или параметра containerProps. Применяйте эти методы с учётом специфичности CSS, чтобы добиться нужных вам настроек.

1. Изменение CSS-переменных

Для настройки поддерживаются следующие CSS-переменные:

/* Button distance to bottom, default is `1rem` */
--dify-chatbot-bubble-button-bottom

/* Button distance to right, default is `1rem` */
--dify-chatbot-bubble-button-right

/* Button distance to left, default is `unset` */
--dify-chatbot-bubble-button-left

/* Button distance to top, default is `unset` */
--dify-chatbot-bubble-button-top

/* Button background color, default is `#155EEF` */
--dify-chatbot-bubble-button-bg-color

/* Button width, default is `50px` */
--dify-chatbot-bubble-button-width

/* Button height, default is `50px` */
--dify-chatbot-bubble-button-height

/* Button border radius, default is `25px` */
--dify-chatbot-bubble-button-border-radius

/* Button box shadow, default is `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
--dify-chatbot-bubble-button-box-shadow

/* Button hover transform, default is `scale(1.1)` */
--dify-chatbot-bubble-button-hover-transform

Чтобы изменить цвет фона на #ABCDEF, добавьте этот CSS:

#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}

2. Использование `containerProps`

Задайте инлайновые стили с помощью атрибута style:

window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        style: {
            backgroundColor: '#ABCDEF',
            width: '60px',
            height: '60px',
            borderRadius: '30px',
        },
        // For minor style overrides, you can also use a string value for the `style` attribute:
        // style: 'background-color: #ABCDEF; width: 60px;',
    },
}

Примените CSS-классы с помощью атрибута className:

window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        className: 'dify-chatbot-bubble-button-custom my-custom-class',
    },
}

3. Передача `inputs`

Поддерживаются четыре типа inputs:

text-input: Принимает любое значение. Входная строка будет усечена, если её длина превышает максимально допустимую.
paragraph: Аналогично text-input, принимает любое значение и усекает строку, если она длиннее максимальной длины.
number: Принимает число или числовую строку. Если передана строка, она будет преобразована в число с помощью функции Number.
options: Принимает любое значение при условии, что оно совпадает с одним из предварительно настроенных вариантов.

Пример конфигурации:

window.difyChatbotConfig = {
    // Other configuration settings...
    inputs: {
        name: 'apple',
    },
}

Примечание. При использовании скрипта embed.js для создания iframe каждое входное значение обрабатывается — сжимается с помощью GZIP и кодируется в base64 — перед добавлением к URL. Например, URL с обработанными входными значениями будет выглядеть так: http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D

Начало работы

Создание

Публикация

Мониторинг

База знаний

Рабочее пространство

Руководства

Встраивание веб-приложения

Как работает встраивание веб-приложения

Виджет чат-пузыря

Интеграция через iframe

Управление через JavaScript

Адаптивный дизайн

Виджет чат-пузыря

Параметры конфигурации

Интеграция через iframe

Зачем использовать встраивание через iframe

Параметры настройки

Выберите способ встраивания

Устранение неполадок

1. Изменение CSS-переменных

2. Использование `containerProps`

3. Передача `inputs`

​Как работает встраивание веб-приложения

Виджет чат-пузыря

Интеграция через iframe

Управление через JavaScript

Адаптивный дизайн

​Виджет чат-пузыря

​Параметры конфигурации

​Интеграция через iframe

​Зачем использовать встраивание через iframe

​Параметры настройки

​Выберите способ встраивания

​Устранение неполадок

​1. Изменение CSS-переменных

​2. Использование containerProps

​3. Передача inputs

Как работает встраивание веб-приложения

Виджет чат-пузыря

Параметры конфигурации

Интеграция через iframe

Зачем использовать встраивание через iframe

Параметры настройки

Выберите способ встраивания

Устранение неполадок

1. Изменение CSS-переменных

2. Использование `containerProps`

3. Передача `inputs`