Демонстрация встраиваемого виджета онлайн-консультанта

Виджет автоматически загружает настройки из config.json и работает на любом сайте

Как встроить на свой сайт

1. Добавьте скрипт на ваш сайт:

<script src="embed-widget.js"></script>

2. Убедитесь, что все файлы доступны:

  • embed-widget.js - этот файл
  • OnlineConsultant.js - основной скрипт виджета
  • OnlineConsultant.css - стили виджета
  • config.json - конфигурационный файл

3. Настройки через data-атрибуты (опционально):

<script 
    src="embed-widget.js"
    data-css-path="путь/к/OnlineConsultant.css"
    data-js-path="путь/к/OnlineConsultant.js"
    data-config-path="путь/к/config.json"
    data-widget-id="custom-widget-id">
</script>

JavaScript API

После загрузки виджета доступен глобальный объект window.OnlineConsultantAPI

Открыть чат

Программно открывает окно чата

window.OnlineConsultantAPI.open()

Закрыть чат

Программно закрывает окно чата

window.OnlineConsultantAPI.close()

Отправить сообщение

Отправляет сообщение от имени пользователя

window.OnlineConsultantAPI.sendMessage("Текст сообщения")

Переключить виджет

Сворачивает/разворачивает виджет

window.OnlineConsultantAPI.toggle()

Управление виджетом

Используйте кнопки ниже для тестирования API виджета:

Конфигурация

Виджет автоматически загружает настройки из config.json. Для изменения настроек отредактируйте этот файл.

Пример структуры config.json:

{
    "collapsedModeDesktop": "rectangle",
    "position": "right",
    "primaryColor": "#ff8c42",
    "companyName": "СветоМир",
    "firstConsultantMessage": {
        "enabled": true,
        "text": "Добрый день! Я Светлана..."
    }
}