Data Delivery

UI Widgets

Follow this guide to easily add UI Widgets directly into your project.

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 .

View the WebKit - WKWebView guide.

// WebViewController.swift
import UIKit
import WebKit
import 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 SwiftUI
import 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 SwiftUI
import 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 .

View the Webkit - WebView guide.

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 .

View the Flutter WebView guide.


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 features
import 'package:webview_flutter_android/webview_flutter_android.dart';
// Import for iOS features
import '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 .

View the React Native WebView guide.


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 }} />;
}
Previous
Webhooks