# Block UI

Интерфейс виджета для inline-встраивания в страницу.
Подходит, например, для трансляций (когда чат находится рядом с видео).

Виджет будет занимать 100% высоты и ширины узла, в который он встроен

## Получение кол-ва непрочитанных сообщений в чате
Если вы планируете постоянно отображать виджет, можно использовать событие
виджета `counter` ([подробнее о том как подписываться на события](./events.md)).
Иначе можно подключить плагин [UnreadCounter](./plugin-unread-counter.md).

```ts
import 'yandex-messenger-widget/lib/ui/button.css';
import {
    blockUIFactory,
    createMultiChatsWidget,
} from 'yandex-messenger-widget';

const ui = blockUIFactory();
const widget = createMultiChatsWidget(
    {
        serviceId: YOUR_SERVICE_ID,
        iframeOpenData: {
            // Параметры открытия виджета (идентификатор чата, идентификатор бота и т.п.)
            // [подробнее](./interfaces.md#baseiframeopenparams)
        },
    },
)
  .setUI(ui)
  .init();

ui.mount(document.getElementById('widget_wrapper_node'))

widget.show();
```

**blockUIFactory**(): [Block](./interfaces.md#block)

---

# CSS переменные

`--yandex-mssngr-widget-bg-color`: `#fff`

>Цвет фона

---

`--yandex-mssngr-widget-text-color`: `#292c33`

>Цвeт текста

---

`--yandex-mssngr-widget-error-button-color`: `#1c70c4`

>Цвет текста кнопки **Повторить**

---

`--yandex-mssngr-widget-loader-spinner-color`: `#00a8a8`

>Цвет спиннера

---

`--yandex-mssngr-widget-fullscreen-left`: `0`

>Левый отступ в полноэкранном режиме (координата)

---

`--yandex-mssngr-widget-fullscreen-right`: `0`

>Правый отступ в полноэкранном режиме (координата)

---

`--yandex-mssngr-widget-fullscreen-top`: `0`

>Верхний отступ в полноэкранном режиме (координата)

---

`--yandex-mssngr-widget-fullscreen-bottom`: `0`

>Нижний отступ в полноэкранном режиме (координата)

---

`--yandex-mssngr-widget-fullscreen-z-index`: `10050`

>z-index полноэкранного режима

---