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

//  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

---

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

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

---

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);

  @override
  WebState createState() => WebState();
}

class WebState extends State<WebView> {
  late final WebViewController _controller;

  @override
  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());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Webview Example')),
      body: WebViewWidget(controller: _controller),
    );
  }

}

---

React Native

---

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