opti-load-widget

Базовый виджет

Пример использования виджета

// Путь до скрипта с загрузчиком базового виджета
import { l as loadChatWidget } from 'http://localhost:4173/src/loadChatWidget.js'

// Инициализация
loadChatWidget(initParams)

Параметры инициализации виджета

const initParams = {
  connectsOnShow: false, // Подключение виджета к чат-серверу по открытии
  show: false, // Открыт по умолчанию
  // shouldLoadFont: true 
  // isButtonsStayed: false   
  operatorImg: { // Автарка оператора
    src: '', // Путь до аватарки
    alt: '', // alt атрибут для аватарки 
    isVisible: false
  },
  userImg: { // Аватарка пользователя
    src: '', // Путь до аватарки
    alt: '', // alt атрибут для аватарки
    isVisible: false
  },
  date: { // Дата сообщения
    isVisible: true,
    params: { // Параметры даты 
      hour: '2-digit',
      minute: '2-digit'
    }
  },
  fontPath: '', // Путь до css файла, который подключается к странице, подходит для загрузки шрифтов
  cssPath: '', // Путь до css файла, который подгрузится к виджету
  title: 'Чат', // Текст в шапке виджета
  placeholder: 'Сообщение', // Placeholder для поля ввода сообщения
  styles: // Инлайн стили для виджета строкой
    `:host {
        --main-height: 700px; // Высота виджета
        --main-width: 500px; // Ширина виджета
        --main-bg: // Цвет фона виджета
        --main-color: // Цвет текста виджета
        --main-fs // Размер шрифта виджета
        --main-radius: 25px // Скругление рамок виджета
        --main-border-width // Толщина границ виджета
        --main-padding: 15px // padding у шапки, тела и формы виджета
        --main-border-color // Цвет границ виджета
        --margin-bottom: 0px; // Отступ до нижней границы страницы
        --margin-right: 0px; // Отступ до правой границы страницы
        --buttons-direction: // flex-direction для кнопок
        --buttons-color: // Цвет кнопок
        --buttons-bg: // Цвет фона кнопок
        --header-color // Цвет шапки
        --header-bg // Цвет фона шапки
        --header-border-width // Толщина границ шапки
        --footer-bg // Цвет фона формы
        --footer-border-width // Толщина границ формы
        --input-color // Цвет поля ввода в форме
        --input-border-width // Толщина границ поля ввода в форме
        --send-icon-active-color // Цвет активной кнопки отправки сообщения
        --send-icon-inactive-color // Цвет неактивной кнопки отправки сообщения
        --message-bg // Фон сообщения
        --time-color // Цвет времени у сообщения
        --font // font-family для виджета
        --open-btn-size: 4rem// размер кнопки открытия виджета
      }
  `,
}