Data Delivery
UI Widgets
Follow this guide to easily add UI Widgets directly into your project.
Learn more about UI Widgets
Choose your platform:
iOS
You can show a webview in your UIKit or SwiftUI project.
UIKit
Use a WKWebView
If your project uses UIKit views, you will need to create and display a WKWebView .
// WebViewController.swift
import UIKitimport WebKitimport Sahha
class WebViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!
override func loadView() { let webConfiguration = WKWebViewConfiguration() webView = WKWebView(frame: .zero, configuration: webConfiguration) webView.uiDelegate = self view = webView }
override func viewDidLoad() { super.viewDidLoad()
// Use https://webview.sahha.ai/app in production
if let url = URL(string: "https://sandbox.webview.sahha.ai/app") { var request = URLRequest(url: url) if let authToken = Sahha.profileToken { request.setValue(authToken, forHTTPHeaderField: "Authorization") } webView.load(request) }
}
}
SwiftUI
Use a UIViewRepresentable and WKWebview
If your project uses SwiftUI views, you will need to create and display a UIViewRepresentable and WKWebview .
Step 1) Create the UIViewRepresentable
View the SwiftUI - UIViewRepresentable guide.
// WebView.swift
import SwiftUIimport WebKit
struct WebView: UIViewRepresentable {
let urlString: String var profileToken: String?
func makeUIView(context: Context) -> WKWebView {
let webview = WKWebView() webview.isMultipleTouchEnabled = false return webview }
func updateUIView(_ webView: WKWebView, context: Context) {
if let url = URL(string: urlString) { var request = URLRequest(url: url)
// Add authorization if let authToken = profileToken { request.setValue(authToken, forHTTPHeaderField: "Authorization") }
webView.load(request) } }
}
Step 2) Display the UIViewRepresentable in a SwiftUI view
View the WebKit - WKWebview guide.
// ContentView.swift
import SwiftUIimport Sahha
struct ContentView: View {
var body: some View {
// Use https://webview.sahha.ai/app in production
WebView(urlString: "https://sandbox.webview.sahha.ai/app", profileToken: Sahha.profileToken)
}}
Android
Use a WebView
You will need to create and display a WebView .
AndroidView( factory = { WebView(context).apply { val cookieManager = CookieManager.getInstance() cookieManager.setAcceptCookie(true) cookieManager.setAcceptThirdPartyCookies(this, true)
layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT )
webViewClient = WebViewClient()
settings.apply { javaScriptEnabled = true domStorageEnabled = true databaseEnabled = true cacheMode = WebSettings.LOAD_DEFAULT }
// Use https://webview.sahha.ai/app in production
val webViewUrl = "https://sandbox.webview.sahha.ai/app" Sahha.profileToken?.also { token -> loadUrl(webViewUrl, mapOf("Authorization" to token)) } ?: loadUrl(webViewUrl)
} },)
Flutter
Use a WebView
You will need to create and display a WebView .
Step 1) Add webview_flutter as a dependency in your pubspec.yaml file
dependencies: flutter: sdk: flutter
webview_flutter: ^4.7.0
Step 2) Instantiate a WebViewController
View the Flutter WebViewController guide.
Step 3) Pass the controller to a WebViewWidget
View the Flutter WebViewWidget guide.
import 'package:flutter/material.dart';import 'package:sahha_flutter/sahha_flutter.dart';
import 'package:webview_flutter/webview_flutter.dart';// Import for Android featuresimport 'package:webview_flutter_android/webview_flutter_android.dart';// Import for iOS featuresimport 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
class WebView extends StatefulWidget { const WebView({Key? key}) : super(key: key);
WebState createState() => WebState();}
class WebState extends State<WebView> { late final WebViewController _controller;
void initState() { super.initState();
// #docregion platform_features late final PlatformWebViewControllerCreationParams params; if (WebViewPlatform.instance is WebKitWebViewPlatform) { params = WebKitWebViewControllerCreationParams( allowsInlineMediaPlayback: true, mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{}, ); } else { params = const PlatformWebViewControllerCreationParams(); }
final WebViewController controller = WebViewController.fromPlatformCreationParams(params);
controller ..setJavaScriptMode(JavaScriptMode.unrestricted) ..setBackgroundColor(const Color(0x00000000)) ..setNavigationDelegate( NavigationDelegate( onProgress: (int progress) { debugPrint('WebView is loading (progress : $progress%)'); }, onPageStarted: (String url) { debugPrint('Page started loading: $url'); }, onPageFinished: (String url) { debugPrint('Page finished loading: $url'); }, onWebResourceError: (WebResourceError error) { debugPrint('''Page resource error: code: ${error.errorCode} description: ${error.description} errorType: ${error.errorType} isForMainFrame: ${error.isForMainFrame} '''); }, onNavigationRequest: (NavigationRequest request) { if (request.url.startsWith('https://www.youtube.com/')) { debugPrint('blocking navigation to ${request.url}'); return NavigationDecision.prevent; } debugPrint('allowing navigation to ${request.url}'); return NavigationDecision.navigate; }, onHttpError: (HttpResponseError error) { debugPrint('Error occurred on page: ${error.response?.statusCode}'); }, onUrlChange: (UrlChange change) { debugPrint('url change to ${change.url}'); }, onHttpAuthRequest: (HttpAuthRequest request) { debugPrint('auth request $request'); }, ), )
// #docregion platform_features if (controller.platform is AndroidWebViewController) { AndroidWebViewController.enableDebugging(true); (controller.platform as AndroidWebViewController) .setMediaPlaybackRequiresUserGesture(false); } // #enddocregion platform_features
_controller = controller;
SahhaFlutter.getProfileToken().then((value) { debugPrint(value); if (value != null) { controller.loadRequest(
// Use https://webview.sahha.ai/app in production
Uri.parse("https://sandbox.webview.sahha.ai/app"), headers: {"Authorization": value}, ); } else { controller.loadRequest(
// Use https://webview.sahha.ai/app in production
Uri.parse("https://sandbox.webview.sahha.ai/app"), ); } }).catchError((error, stackTrace) { debugPrint(error.toString()); }); }
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Webview Example')), body: WebViewWidget(controller: _controller), ); }
}
React Native
Use a WebView
You will need to create and display a WebView .
Step 1) Install react-native-webview via npm
npm install react-native-webview
Step 2) Instantiate a WebViewController
import React, { Component } from 'react';import { WebView } from 'react-native-webview';import Sahha from 'sahha-react-native';
const MyWebComponent = () => {
const [profileToken, setProfileToken] = useState<string>('');
useEffect(() => { Sahha.getProfileToken((error: string, token?: string) => { if (error) { console.error(`Error: ${error}`); } else if (token) { console.log(`Profile Token: ${profileToken}`); setProfileToken(token); } else { console.log(`Profile Token: null`); } }); }, []);
// Use https://webview.sahha.ai/app in production
return <WebView source={{ uri: "https://sandbox.webview.sahha.ai/app", headers: { 'Authorization': profileToken, }, }} style={{ flex: 1 }} />;}