Mobile Integration

The SDK includes a native bridge for embedding the chat widget inside mobile app webviews.

Supported Platforms

Platform	Detection Method
React Native	window.ReactNativeWebView
Flutter	window.flutter_inappwebview
iOS (WKWebView)	window.webkit.messageHandlers.saytvBridge
Android (WebView)	window.SayTVAndroidBridge

Mobile HTML Shell

The SDK ships a pre-built HTML page designed for webview embedding:

import mobileHtml from '@saytv/chat-sdk/mobile';

This HTML shell:

• Contains a full-width <saytv-chat> element
• Loads the widget module automatically
• Listens for configuration via postMessage

Initializing from Native Code

Send an INIT_CONFIG message from your native app to configure the widget:

// From native side (pseudocode)
webView.postMessage(JSON.stringify({
  type: 'INIT_CONFIG',
  config: {
    appId: 'your-app-id',
    authToken: 'user-jwt-token',
    theme: 'dark',
    builtInAuth: false,
  }
}));

The shell applies each config key as an attribute on the <saytv-chat> element.

React Native

import { WebView } from 'react-native-webview';

function ChatScreen() {
  const webViewRef = useRef(null);

  const initChat = () => {
    webViewRef.current?.postMessage(JSON.stringify({
      type: 'INIT_CONFIG',
      config: {
        appId: 'your-app-id',
        authToken: userToken,
        theme: 'dark',
      },
    }));
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://sdk.saytv.net/mobile.html' }}
      onLoad={initChat}
    />
  );
}

Flutter

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(
    url: WebUri('https://sdk.saytv.net/mobile.html'),
  ),
  onLoadStop: (controller, url) async {
    await controller.evaluateJavascript(source: '''
      window.postMessage(JSON.stringify({
        type: 'INIT_CONFIG',
        config: {
          appId: 'your-app-id',
          authToken: '$userToken',
          theme: 'dark',
        }
      }), '*');
    ''');
  },
)

iOS (WKWebView)

let config = [
    "type": "INIT_CONFIG",
    "config": [
        "appId": "your-app-id",
        "authToken": userToken,
        "theme": "dark"
    ]
] as [String: Any]

let json = try! JSONSerialization.data(withJSONObject: config)
let jsonString = String(data: json, encoding: .utf8)!

webView.evaluateJavaScript("window.postMessage(\(jsonString), '*')")

Android (WebView)

val config = JSONObject().apply {
    put("type", "INIT_CONFIG")
    put("config", JSONObject().apply {
        put("appId", "your-app-id")
        put("authToken", userToken)
        put("theme", "dark")
    })
}

webView.evaluateJavascript(
    "window.postMessage(${config}, '*')", null
)