Як інтегрувати віджет у мобільний застосунок (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.

Перед початком

  • У вас є активний бот у ConnectiveOne з налаштованим віджетом.
  • Ви маєте доступ до налаштувань віджету (Меню → Налаштування → Боти → оберіть бота → Widget).
  • У вас є середовище розробки: Xcode (iOS), Android Studio (Android) або Node.js з React Native.
  • Ви отримали посилання на віджет у форматі Frame (див. розділ нижче).

Як отримати посилання на віджет

Перед інтеграцією в мобільний застосунок потрібно отримати URL віджету у форматі Frame.

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

iOS (Swift)

Для iOS використовується WKWebView. Потрібен Mac та Xcode.

Крок 1. Створити проект

  1. Відкрийте Xcode → File → New → Project.
  2. Виберіть iOS → Single View App → Next.
  3. Вкажіть 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).

Пов'язані інструкції