Огляд документації — 23.02.2026

Стаття: Як інтегрувати віджет у мобільний застосунок (WebView)

Шлях: docs/client/uk/channels/how-to/integrate-widget-mobile-webview.md

1. Ідентифікація модуля та сценаріїв

Модуль: Channels / Widget

Ключові дії зі статті:

Отримати посилання на віджет у форматі Frame
Інтегрувати WebView в iOS (Swift), Android (Kotlin), React Native

Джерела для перевірки:

docs/developer/widget/widget-cli/core/project.md — режими віджету (Frame Mode)
docs/business-guides/widget/widget-general-guide.md
apps/widget/widget-demo/ — UI вибору displayMode (widget/frame/inline)
apps/widget/widget-client-v2/src/store/widget.js — displayMode: 'frame'

2. Результати перевірки відповідності продукту

✅ Відповідає продукту

Елемент	Статус
WKWebView для iOS	✅ Підтверджено — стандартний підхід Apple
WebView для Android	✅ Підтверджено
react-native-webview	✅ Підтверджено — офіційна бібліотека
CORS domains	✅ Є в налаштуваннях віджету
Шлях Меню → Налаштування → Боти → Widget	✅ Відповідає іншим статтям
allowsInlineMediaPlayback для iOS	✅ Потрібно для медіа у віджеті

⚠️ Потрібні уточнення

Проблема	Деталі
Формат Frame в UI	У коді: `displayMode: 'frame'`. У Widget Demo UI: "Frame" / "Повноекранний режим". У статті написано "оберіть формат Frame" — потрібно уточнити, де саме: у Widget Demo (`/widget/{locale}/?bot-id={id}`) чи в Налаштування → Widget. За docs: Widget Demo — для налаштування вигляду, Settings → Widget — для коду вставки та CORS.
Де генерується код з displayMode: frame	Embed code генерується в Widget Demo (ControlWidget/EmbedCode.vue). Коли обрано displayMode "frame", код включає `displayMode: 'frame'`. Тобто користувач має йти в Widget Demo, обрати Frame, скопіювати код, вставити на свою сторінку.
Навігація	Стаття каже "Меню → Налаштування → Боти → Widget" — це для CORS та загальних налаштувань. Код з Frame генерується в Widget Demo. Потрібно розділити: (1) Widget Demo для коду, (2) Settings → Widget для CORS.

❌ Виявлені невідповідності

Проблема	Що в статті	Що в продукті
Де обрати Frame	"У налаштуваннях віджету оберіть формат Frame"	Frame обирається в Widget Demo (панель Control), а не в Settings → Widget. У Settings є CORS, Custom Code, генерація коду — але вибір displayMode (widget/frame/inline) — у Widget Demo.
Порядок кроків	Крок 1: Settings → Widget, Крок 2: обрати Frame	Логічніше: спочатку Widget Demo → обрати Frame → скопіювати код → вставити на сторінку → додати домен у CORS (Settings → Widget).

3. План виправлень

Варіант A (мінімальні зміни)

Уточнити розділ «Як отримати посилання на віджет»:

Додати посилання на Widget Demo: /widget/{locale}/?bot-id={bot_id}
Пояснити, що Frame обирається в Widget Demo (панель налаштувань зліва), а не в Settings
Зберегти крок з CORS у Settings → Widget

Варіант B (повна переробка кроків)

Крок 1: Відкрити Widget Demo (/widget/uk/?bot-id={bot_id} або через Меню)
Крок 2: У панелі налаштувань обрати режим Frame (Повноекранний режим)
Крок 3: Скопіювати згенерований код вставки
Крок 4: Додати код на пусту веб-сторінку та опублікувати
Крок 5: У Меню → Налаштування → Боти → Widget додати домен сторінки до CORS domains
Крок 6: Посилання на опубліковану сторінку = URL для WebView

Рекомендація

Варіант A — швидке виправлення. Додати 1–2 речення про те, що Frame обирається в Widget Demo.

4. Перевірка за docs-redactor

Критерій	Статус
Навігація "Меню"	✅ Використано
Активний залог	✅
Посилання на файли	✅ Всі файли існують
Немає посилань на developer docs	✅
Термінологія (ConnectiveOne, віджет)	✅

5. Інші зауваження

Android: Код спрощений. Для вибору файлів (відправка в чат) потрібен onShowFileChooser у WebChromeClient — у статті лише згадка. Можна додати примітку: «Для відправки файлів з чату потрібна додаткова конфігурація WebChromeClient».
iOS: webView.configuration — у Swift WKWebViewConfiguration має allowsInlineMediaPlayback. Код коректний.
Посилання: Всі внутрішні посилання валідні.

6. Статус

Виправлення внесені (23.02.2026)
Перевірено повторно

Зміни:

Уточнено, що Frame обирається в Widget Demo, а не в Settings
Додано шлях до Widget Demo
Розділено кроки: Widget Demo для коду, Settings для CORS
Уточнено опис формату Frame
Виправлено примітку про Android file chooser