# Создание инстанса виджета

Для создания экземпляра класса виджета используйте одну из четырех доступных фабрик.

Все они принимают объект [Options](./interfaces.md#interface-options),
единственным обязательным полем которого является [serviceId](./interfaces.md#serviceid).

```ts
const widget = createMultiChatsWidget({
    serviceId: -1,
    flags: {
        theme: 'dark',
    }
});
```

`createMultiChatsWidget(options)` - возвращает инстанс класса виджета, версия со списком чатов

`createMultiChatsBlockUIWidget(options)` - возвращает инстанс класса виджета,
версия со списком чатов, режим для BlockUI

`createSingleChatWidget(options)` - возвращает инстанс класса виджета для отображения одного чата

`createSingleChatBlockUIWidget(options)` - возвращает инстанс класса виджета для отображения одного чата,
режим для BlockUI

# Класс для работы с виджетом

Для инициализации виджета необходимо:
1. Выбрать один из вариантов интерфейса виджета [UI](./ui.md), либо реализовать свой.
2. Выбрать нужные плагины, для расширения функциональности [Plugins](./plugins.md)
3. Выбрать одну из фабрик (см. выше) и получить экземпляр класса `Widget`
4. Проинициализировать виджет `Widget::init` и задать точку монтирования для интерфейса, вызвав `mount`

## serviceId

**serviceId** - идентификатор сервиса является обязательным. [Как завести serviceId](./cookbook.md#integraciya)

## Запуск и работа с виджетом

Для запуска виджета необходимо вызвать метод `Widget::init`,
перед этим необходимо инициализировать ui (`Widget::setUI`) и плагины (`Widget::setPlugin`),
смонитровать ui, вызвав `mount`.
Подписки на события/запросы также лучше делать до вызова.

Для програмного открытия/скрытия виджета нужно использовать
методы `Widget::show`/`Widget::hide`.

Виджет должен быть полностью инициализирован до начала работы с его программными api

## Подробнее
[API Мессенджера](./api.md)

[События Мессенджера](./events.md)

[Обработка запросов Мессенджера](./handlers.md)

[Настройка отображения Мессенджера (флаги)](./flags.md)

[Интеграция в React приложения](./react.md)

## Пример интеграции виджета с кнопкой

```ts
import {
    Widget,
    YandexConfig,
    buttonUIFactory,
    yandexUnreadCounterFactory,
} from 'yandex-messenger-widget';
import 'yandex-messenger-widget/lib/ui/button.css';

const unreadCounterPlugin = yandexUnreadCounterFactory(),
const ui = buttonUIFactory({
    unreadCounterPlugin,
});

const widget = createMultiChatsWidget({
     // [Options](./interfaces.md#interface-options)
});

widget.events.ready.addListener(() => console.log('Widget ready'));

widget
    .addPlugin(unreadCounterPlugin)
    .setUI(ui)
    .init()

ui.mount(document.body);
```

## Конструктор

**constructor**(config: [Config](./interfaces.md#config)): [Widget](./interfaces.md#widget)

`config`: [Config](./interfaces.md#config)

---

## Инициализировать виджет

**init**(): [Widget](./interfaces.md#widget)

---

## Открыть Мессенджер

Метод позволяет открыть определенный чат или список чатов в Мессенджере
Если `params` не передан, при первом открытии
будут использованы данные из `iframeOpenData`,
при последующих открытиях будет вызван только `LCShown`

**show**(params?: [BaseIframeOpenParams](./interfaces.md#baseiframeopenparams), callback: (error?: void | Error): void): void

`params`

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`guid?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Идентификатор собеседника

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`chatId?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Идентификатор чата

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`inviteHash?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Инвайт хеш чата

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`autoJoinHash?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Секрет для автоматического присоединения в чат

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`username?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Идентификатор собеседника

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`anchorTimestamp?`: *number*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Временная метка сообщения, которое нужно отобразить на экране

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`chatList?`: *boolean*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Открыть нулевой экран/список чатов

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`pasteText?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Текст, который будет вставлен в поле ввода сообщения в открываемом чате

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`pasteForce?`: *boolean*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Нужно ли заменить текущий текст в поле ввода

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`helloMessage?`: *[HelloMessage](./interfaces.md#hellomessage)*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Приветственная надпись в чате (на данный момент сообщение выглядит как системное)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`deeplink?`: *string*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Диплинк на чат

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`initCall?`: *'audio' | 'video'*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Начать звонок пользователю

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`context?`: *object*

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Объект, который будет передан в чат поддержки

Параметры открытия Мессенджера

`callback`: (error?: void | Error): void

Колбэк открытия чата/нулвого экрана

---

## Свернуть Мессенджер

**hide**(): void

---

## Установить UI плагин

**setUI**(plugin: [UIPlugin](./interfaces.md#uiplugin)): [Widget](./interfaces.md#widget)

`plugin`: [UIPlugin](./interfaces.md#uiplugin)

---

## Установить плагин.

Порядок плагинов имеет значение.

**addPlugin**(plugin: [Plugin](./interfaces.md#plugin)): [Widget](./interfaces.md#widget)

`plugin`: [Plugin](./interfaces.md#plugin)

---

## Удалить виджет.

**destroy**(): void

---