Available on the Enterprise plan
Kazm can be embedded in a mobile app by using a WebView component and passing in an HTML element that loads the SDK and initializes Kazm. The logged in user's identity should be exchanged for a login token so that users do not need to sign in again to Kazm.
The sample code below uses the following parameters:
- membershipId: This can be found in the url of the membership page, e.g. "kazm.com/membership/"
- loginToken: This can be fetched from a secure server environment using the Kazm API key. Detailed instructions here.
React Native Example
import { WebView } from 'react-native-webview';
function KazmComponent () {
const htmlContent = `
<html>
<head>
<script src="https://unpkg.com/@kazm/client-sdk@latest"></script>
<script>
function initializeKazm() {
const kazmSDK = new kazm.KazmSDK();
kazmSDK.initializeEmbed({
membershipId: <your-membership-id>,
loginToken: <kazm-login-token-for-current-user>
elementId: "kazm-form",
isAppEmbed: true,
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body onload="initializeKazm()">
<div id="kazm-form" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;" ></div>
</body>
</html>
`;
return (
<WebView
source={{ html: htmlContent }}
style={{ flex: 1 }}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
);
}
Android (Kotlin) Example
(1) Add the webview to the layout:
<WebView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/kazmwebview"
/>
(2) Set up the webview by calling this in the onCreate function of the page the membership is embedded on:
fun initKazmWebview(){
val kazmWebView: WebView = findViewById(R.id.kazmwebview)
kazmWebView.settings.javaScriptEnabled = true
kazmWebView.settings.domStorageEnabled = true
val htmlContent = """
<html>
<head>
<script src="https://unpkg.com/@kazm/client-sdk@latest"></script>
<script>
function initializeKazm() {
const kazmSDK = new kazm.KazmSDK();
kazmSDK.initializeKazmForm({
membershipId: <your-membership-id>,
loginToken: <kazm-login-token-for-current-user>
elementId: "kazm-form",
isAppEmbed: true,
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body onload="initializeKazm()">
<div id="kazm-form" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;" ></div>
</body>
</html>
""".trimIndent()
kazmWebView.loadData(htmlContent, "text/html", "UTF-8")
}
iOS (Swift) example
(1) Add the webview component
import UIKit
import WebKit
import SwiftUI
struct KazmEmbed: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> KazmEmbedView {
return KazmEmbedView()
}
func updateUIViewController(_ uiViewController: KazmEmbedView, context: Context) {}
}
class KazmEmbedView: UIViewController, WKUIDelegate, WKNavigationDelegate {
var kazmWebView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
kazmWebView = createConfiguredWebView()
setupWebViewConstraints()
loadHTMLContent()
}
}
private extension KazmEmbedView {
func createConfiguredWebView() -> WKWebView {
let configuration = WKWebViewConfiguration()
configuration.defaultWebpagePreferences.allowsContentJavaScript = true
let webView = WKWebView(frame: .zero, configuration: configuration)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.uiDelegate = self
webView.navigationDelegate = self
view.addSubview(webView)
return webView
}
func setupWebViewConstraints() {
NSLayoutConstraint.activate([
kazmWebView.topAnchor.constraint(equalTo: view.topAnchor),
kazmWebView.leftAnchor.constraint(equalTo: view.leftAnchor),
kazmWebView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
kazmWebView.rightAnchor.constraint(equalTo: view.rightAnchor)
])
}
func loadHTMLContent() {
let htmlContent = """
<html>
<head>
<script src="https://unpkg.com/@kazm/client-sdk@latest"></script>
<script>
function initializeForm() {
const kazmSDK = new kazm.KazmSDK();
kazmSDK.initializeKazmForm({
membershipId: <your-membership-id>,
loginToken: <kazm-login-token-for-current-user>
elementId: "kazm-form",
isAppEmbed: true,
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body onload="initializeForm()">
<div id="kazm-form" style="width: 100%; height: 100%;" ></div>
</body>
</html>
"""
kazmWebView.loadHTMLString(htmlContent, baseURL: nil)
}
}
extension KazmEmbedView {
func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
if let url = navigationAction.request.url, UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
return nil
}
}
(2) Add the webview to the page
struct YourPage: View {
var body: some View {
KazmEmbed()
}
}