Як інтегрувати віджет у мобільний застосунок (WebView)
Віджет ConnectiveOne можна вбудувати в мобільний застосунок через WebView. Це дозволяє показувати чат-ботів та підключення до операторів безпосередньо в iOS, Android або React Native додатку. Інструкція допоможе отримати посилання на віджет та інтегрувати його в кожну з платформ.
Коли знадобиться
- Потрібно додати чат ConnectiveOne в нативний мобільний застосунок (iOS, Android).
- Ви розробляєте застосунок на React Native і хочете показувати віджет на екрані.
- Є готовий віджет на сайті, і потрібно використати той самий чат у мобільному додатку.
Що важливо знати
- WebView — компонент, який відображає веб-контент всередині застосунку. На iOS це WKWebView, на Android — WebView, у React Native — бібліотека react-native-webview.
- Посилання на віджет — URL сторінки, на якій віджет відкритий у форматі Frame. Це посилання завантажується в WebView.
- Формат Frame — режим відображення віджету (Повноекранний режим), який обирається в Widget Demo. Віджет займає весь простір контейнера і підходить для WebView.
Перед початком
Як отримати посилання на віджет
Перед інтеграцією в мобільний застосунок потрібно отримати URL віджету у форматі Frame.
- Відкрийте Widget Demo — сторінку налаштування вигляду віджету (шлях:
/widget/{locale}/?bot-id={bot_id}або через Меню → Налаштування → Боти → оберіть бота → перейдіть до Widget Demo). - У панелі налаштувань зліва оберіть режим Frame (Повноекранний режим).
- Скопіюйте згенерований код вставки та додайте його на пусту веб-сторінку. Опублікуйте сторінку на доступному вам домені.
- Перейдіть у Меню → Налаштування → Боти → оберіть бота → Widget і додайте origin вашої сторінки (наприклад,
https://your-app.example.com) до списку дозволених доменів. - Посилання на опубліковану сторінку — це ваше посилання для WebView. Використовуйте його замість прикладів у коді нижче.
iOS (Swift)
Для iOS використовується WKWebView. Потрібен Mac та Xcode.
Крок 1. Створити проект
- Відкрийте Xcode → File → New → Project.
- Виберіть iOS → Single View App → Next.
- Вкажіть Product Name та Organization Identifier → Create.
Крок 2. Налаштувати ViewController
Відкрийте ViewController.swift та замініть код на:
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
private var webView: WKWebView!
override func loadView() {
webView = WKWebView()
webView.navigationDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
setupWebView()
}
private func setupWebView() {
let config = webView.configuration
config.allowsInlineMediaPlayback = true // обов'язково для коректної роботи
if let url = URL(string: "ПОСИЛАННЯ_НА_ВАШ_ВІДЖЕТ") {
webView.load(URLRequest(url: url))
}
}
}
Замініть ПОСИЛАННЯ_НА_ВАШ_ВІДЖЕТ на посилання, отримане в попередньому розділі.
Крок 3. Запустити застосунок
Скомпілюйте проект та запустіть його в емуляторі або на пристрої.
Android (Kotlin)
Для Android використовується WebView з увімкненим JavaScript. Потрібен Android Studio.
Крок 1. Підготувати MainActivity
У файлі MainActivity.kt (або MainActivity.java) додайте WebView з увімкненим JavaScript:
// Приклад з Jetpack Compose
@Composable
fun WebViewPage(url: String) {
var backEnabled by remember { mutableStateOf(false) }
var webView: WebView? = null
val activity = LocalContext.current as Activity
AndroidView(
factory = {
WebView(it).apply {
settings.javaScriptEnabled = true
settings.loadWithOverviewMode = true
settings.useWideViewPort = true
settings.setSupportZoom(true)
webViewClient = WebViewClient()
setWebChromeClient(WebChromeClient())
loadUrl(url)
webView = this
}
},
update = { webView = it }
)
BackHandler(enabled = backEnabled) {
webView?.goBack()
}
}
Замініть url на посилання на ваш віджет.
Крок 2. Додати дозволи в AndroidManifest.xml
Переконайтеся, що у AndroidManifest.xml є дозвіл на інтернет:
<uses-permission android:name="android.permission.INTERNET" />
Крок 3. Запустити застосунок
Скомпілюйте та запустіть застосунок в емуляторі або на пристрої.
React Native
Для React Native використовується бібліотека react-native-webview.
Крок 1. Встановити бібліотеку
npm install react-native-webview
Крок 2. Створити компонент
import React from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import { WebView } from 'react-native-webview';
const FullScreenWebView = () => {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<WebView
style={styles.webview}
source={{ uri: 'ПОСИЛАННЯ_НА_ВАШ_ВІДЖЕТ' }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
webview: { flex: 1 },
});
export default FullScreenWebView;
Замініть ПОСИЛАННЯ_НА_ВАШ_ВІДЖЕТ на посилання, отримане в розділі «Як отримати посилання на віджет».
Крок 3. Використати компонент
Додайте FullScreenWebView на потрібний екран вашого застосунку.
Що відбувається після
Після інтеграції віджет відображається в мобільному застосунку. Користувачі можуть відкривати чат, надсилати повідомлення та отримувати відповіді від бота або операторів так само, як на сайті.
Як переконатися, що все працює
- Відкрийте екран з WebView у застосунку.
- Перевірте, що віджет завантажується (бачите інтерфейс чату).
- Натисніть на віджет, відправте тестове повідомлення та переконайтеся, що отримуєте відповідь.
- На Android: для відправки файлів з чату потрібна додаткова конфігурація
WebChromeClient.onShowFileChooser— дивіться документацію Android WebView. - На iOS: переконайтеся, що відео та аудіо відтворюються коректно (завдяки
allowsInlineMediaPlayback).