# Popup UI Интерфейс виджета для открытия Мессенджера в popup-е. Подходит, например, если у вас есть своя кнопка открытия виджета. Если задан параметр `popupTargetNode`, попап будет спозиционирован относительно заданного узла (настроить позиционирования можно через `popupTargetPosition`), иначе попап откроется в правом нижнем углу. Параметры `popupTargetNode` и `popupTargetPosition` не обязательно задавать сразу, в любой момент после инициализации виджета, можно вызвать метод `Popup::setPopupTarget` Чтобы программно открыть виджет, необходимо использовать `Widget::show` ```ts import 'yandex-messenger-widget/lib/ui/popup.css'; import { YandexConfig, Widget, popupUIFactory, } from 'yandex-messenger-widget'; const ui = popupUIFactory({ popupTargetNode: document.getElementById('my_custom_chat_button'), }); const widget = createSingleChatWidget({ serviceId: YOUR_SERVICE_ID, iframeOpenData: { // Параметры открытия виджета (идентификатор чата, идентификатор бота и т.п.) // [подробнее](./interfaces.md#baseiframeopenparams) }, }) .setUI(ui) .init(); ui.mount(); document.getElementById('button').addEventListener('click', () => { widget.show(); }); ``` В случае если нужно отображение кол-ва непрочитанных сообщений можно подключить плагин UnreadCounter ```ts import 'yandex-messenger-widget/lib/ui/popup.css'; import { createSingleChatWidget, popupUIFactory, yandexUnreadCountFactory, } from 'yandex-messenger-widget'; const ui = new popupUIFactory({}); const unreadCounter = yandexUnreadCountFactory(); unreadCounter.onChanged.addListener(({ data }) => console.log(data)); const widget = createSingleChatWidget({ serviceId: -1, iframeOpenData: { // Параметры открытия виджета (идентификатор чата, идентификатор бота и т.п.) // [подробнее](./interfaces.md#baseiframeopenparams) }, }) .addPlugin(unreadCounter) .setUI(ui) .init(); ui.mount(); ``` **popupUIFactory**(props: [PopupProps](./interfaces.md#popupprops)): [Popup](./interfaces.md#popup)\<[PopupProps](./interfaces.md#popupprops), [Props](./interfaces.md#props)> `props`         `isMobile?`: *boolean*         Мобильный вид виджета. Если не задан, вычисляется автоматически         `popupTargetNode?`: *HTMLElement*         Элемент от которого позиционируется попап         `popupTargetPosition?`: *[TargetPosition](./interfaces.md#targetposition)*         Используется вместе с popupTargetNode для позиции появления попапа от элемента. Default bottom-left         `paranjaVisible?`: *boolean*         Если `true`, полупрозрачный слой для затемнения фона будет виден Слой не отключает скролл страницы, включать/отключать скролл можно в событии `onToggled`         `calculatePosition?`: *(el: HTMLElement, anchor: HTMLElement, targetPosition: [TargetPosition](./interfaces.md#targetposition), prevPosition: [Place](./interfaces.md#place)): [Place](./interfaces.md#place)*         Пользовательская функция расчета позиции попапа         `autocloseable?`: *boolean*         Если `true`, то при клике вне области попапа, попап будет закрываться         `strategies?`: *Array\<[BehaviorStrategies](./interfaces.md#behaviorstrategies)>*         Стратегии открытия         `pageScrollController?`: *[PageScrollController](./interfaces.md#pagescrollcontroller)*         Установить кастомный контроллер скролла страницы Нужен для управления поведением скролла страницы при открытии попапа Контроллер по умолчанию отключает скролл страницы в мобильном режиме --- Смонтировать UI в указанный DOM узел. **mount**(): void --- Установка/удаление элемента, относительно которого будет открыт попап **setPopupTarget**(target: HTMLElement, position?: [TargetPosition](./interfaces.md#targetposition)): void `target`: HTMLElement Элемент, относительно которого будет открыт попап. Если `undefined`, то попап начнет открываться сбоку. `position`: [TargetPosition](./interfaces.md#targetposition) Позиция попапа --- `hidden`: *boolean* > Скрыт ли попап `onToggled`: *[Event](./interfaces.md#event)\<[OnToggledEvent](./interfaces.md#ontoggledevent)>* > Вызывается при открытии/закрытии попапа --- # 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 полноэкранного режима --- `--yandex-mssngr-widget-popup-base-z-index`: `10000` >Базовый z-index попапа Сам попап находится на +10 Полупрозрачный слой для затемнения фона на +5 --- `--yandex-mssngr-widget-popup-mobile-header-height`: `40px` >Высота мобильной шапки --- `--yandex-mssngr-widget-popup-width`: `360px` >Ширина попапа --- `--yandex-mssngr-widget-popup-height`: `640px` >Высота попапа --- `--yandex-mssngr-widget-popup-transition-time`: `.4s` >Время отображения попапа --- `--yandex-mssngr-widget-popup-timing-func`: `ease` >Ease функция отображения попапа --- `--yandex-mssngr-widget-popup-paranja-color`: `rgba(0, 0, 0, .56)` >Цвет паранжи --- `--yandex-mssngr-widget-popup-shadow`: `0px -2px 6px rgba(14, 21, 47, 0.03), 0px 6px 18px rgba(14, 21, 47, 0.13)` >Тень попапа --- `--yandex-mssngr-widget-close-color`: `currentColor` >Цвет крестика закрытия --- `--yandex-mssngr-widget-close-bg-hover-color`: `#EFF3F6` >Цвет подложки крестика закрытия при наведении --- `--yandex-mssngr-widget-popup-ui-fixed-offset-bottom`: `20px` >Отступ от попапа снизу --- `--yandex-mssngr-widget-popup-ui-fixed-offset-right`: `20px` >Отступ от попапа справа --- `--yandex-mssngr-widget-popup-ui-border-radius`: `4px` >Радиус углов попапа ---