Iframe Developer Guide

import { useEffect, useRef } from "react";
import { connectChatbase } from "./connect-chatbase";

const AGENT_URL = "https://www.chatbase.co/chatbot-iframe/YOUR_AGENT_ID";

type Props = {
  token: string | null;
  onAssistantMessage?: (content: string) => void;
};

export function ChatbaseIframe({ token, onAssistantMessage }: Props) {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const chatRef = useRef<ReturnType<typeof connectChatbase> | null>(null);
  const tokenRef = useRef(token);
  const onAssistantMessageRef = useRef(onAssistantMessage);
  onAssistantMessageRef.current = onAssistantMessage;

  useEffect(() => {
    const chat = connectChatbase(iframeRef.current!);
    chatRef.current = chat;
    chat.on("iframeReady", () => {
      chat.send({ type: "identify", params: { token: tokenRef.current, publicAttributes: {} } });
    });
    chat.on("assistant-message", ({ content }) => onAssistantMessageRef.current?.(content));
    return chat.disconnect;
  }, []);

  useEffect(() => {
    const previous = tokenRef.current;
    tokenRef.current = token;
    if (previous === token) return;
    chatRef.current?.send({ type: "identify", params: { token, publicAttributes: {} } });
    if (!token) chatRef.current?.send({ type: "resetChat" });
  }, [token]);

  return (
    <iframe
      ref={iframeRef}
      src={AGENT_URL}
      title="Chat"
      style={{ width: "100%", height: "100%", minHeight: 700, border: 0 }}
      referrerPolicy="no-referrer-when-downgrade"
      allow="microphone"
    />
  );
}

const { user, isLoading } = useAuth();

if (isLoading) return null;
return <ChatbaseIframe token={user?.chatbaseToken ?? null} />;

dependencies {
    implementation("androidx.webkit:webkit:1.12.1")
}

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.webkit.JavascriptInterface
import android.webkit.PermissionRequest
import android.webkit.WebChromeClient
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
import androidx.webkit.WebViewCompat
import androidx.webkit.WebViewFeature
import org.json.JSONObject

class ChatbaseActivity : AppCompatActivity() {
    private val agentUrl = "https://www.chatbase.co/chatbot-iframe/YOUR_AGENT_ID"
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val token = intent.getStringExtra("chatbaseToken")
        val tokenJs = token?.let { "\"$it\"" } ?: "null"
        val bridge = """
            const TOKEN = $tokenJs;
            window.addEventListener("message", (e) => {
              if (e.source !== window || !e.data?.type) return;
              if (e.data.type === "iframeReady") {
                window.postMessage({ type: "identify", params: { token: TOKEN, publicAttributes: {} } }, location.origin);
                window.postMessage({ windowInnerWidth: window.innerWidth }, location.origin);
              }
              ChatbaseAndroid.onEvent(JSON.stringify(e.data));
            });
        """.trimIndent()

        webView = WebView(this).apply {
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            addJavascriptInterface(Bridge(), "ChatbaseAndroid")
            webChromeClient = object : WebChromeClient() {
                override fun onPermissionRequest(request: PermissionRequest) {
                    request.grant(request.resources)
                }
            }
            webViewClient = object : WebViewClient() {
                override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
                    if (request.url.host == Uri.parse(agentUrl).host) return false
                    startActivity(Intent(Intent.ACTION_VIEW, request.url))
                    return true
                }
            }
        }

        if (WebViewFeature.isFeatureSupported(WebViewFeature.DOCUMENT_START_SCRIPT)) {
            WebViewCompat.addDocumentStartJavaScript(webView, bridge, setOf("https://${Uri.parse(agentUrl).host}"))
        }

        setContentView(webView)
        webView.loadUrl(agentUrl)
    }

    fun send(message: JSONObject) {
        webView.evaluateJavascript("window.postMessage($message, location.origin)", null)
    }

    inner class Bridge {
        @JavascriptInterface
        fun onEvent(json: String) {
            val event = JSONObject(json)
            when (event.optString("type")) {
                "assistant-message" -> Log.d("Chatbase", event.getJSONObject("data").getString("content"))
                "close" -> runOnUiThread { finish() }
            }
        }
    }
}

startActivity(Intent(this, ChatbaseActivity::class.java).putExtra("chatbaseToken", jwtFromYourServer))

import { useRef } from "react";
import { Linking } from "react-native";
import { WebView, type WebViewMessageEvent } from "react-native-webview";

const AGENT_URL = "https://www.chatbase.co/chatbot-iframe/YOUR_AGENT_ID";

export function ChatbaseScreen({ token, onClose }: { token: string | null; onClose: () => void }) {
  const webViewRef = useRef<WebView>(null);

  const bridge = `
    const TOKEN = ${JSON.stringify(token)};
    window.addEventListener("message", (e) => {
      if (e.source !== window || !e.data?.type) return;
      if (e.data.type === "iframeReady") {
        window.postMessage({ type: "identify", params: { token: TOKEN, publicAttributes: {} } }, location.origin);
        window.postMessage({ windowInnerWidth: window.innerWidth }, location.origin);
      }
      window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
    });
    true;
  `;

  const send = (message: object) =>
    webViewRef.current?.injectJavaScript(
      `window.postMessage(${JSON.stringify(message)}, location.origin); true;`
    );

  const onMessage = (event: WebViewMessageEvent) => {
    const { type, data } = JSON.parse(event.nativeEvent.data);
    if (type === "assistant-message") console.log("Agent replied:", data.content);
    if (type === "close") onClose();
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: AGENT_URL }}
      injectedJavaScriptBeforeContentLoaded={bridge}
      onMessage={onMessage}
      onOpenWindow={(e) => Linking.openURL(e.nativeEvent.targetUrl)}
      mediaCapturePermissionGrantType="grant"
    />
  );
}

import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

const agentUrl = 'https://www.chatbase.co/chatbot-iframe/YOUR_AGENT_ID';

class ChatbaseWebView extends StatefulWidget {
  const ChatbaseWebView({super.key, this.token});

  final String? token;

  @override
  State<ChatbaseWebView> createState() => _ChatbaseWebViewState();
}

class _ChatbaseWebViewState extends State<ChatbaseWebView> {
  InAppWebViewController? _controller;

  String get _bridge => '''
    const TOKEN = ${jsonEncode(widget.token)};
    window.addEventListener("message", (e) => {
      if (e.source !== window || !e.data?.type) return;
      if (e.data.type === "iframeReady") {
        window.postMessage({ type: "identify", params: { token: TOKEN, publicAttributes: {} } }, location.origin);
        window.postMessage({ windowInnerWidth: window.innerWidth }, location.origin);
      }
      window.flutter_inappwebview.callHandler("chatbase", e.data);
    });
  ''';

  void send(Map<String, dynamic> message) {
    _controller?.evaluateJavascript(
      source: 'window.postMessage(${jsonEncode(message)}, location.origin)',
    );
  }

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialUrlRequest: URLRequest(url: WebUri(agentUrl)),
      initialSettings: InAppWebViewSettings(
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: false,
      ),
      initialUserScripts: UnmodifiableListView([
        UserScript(source: _bridge, injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START),
      ]),
      onWebViewCreated: (controller) {
        _controller = controller;
        controller.addJavaScriptHandler(
          handlerName: 'chatbase',
          callback: (args) {
            final event = args.first as Map;
            if (event['type'] == 'assistant-message') {
              debugPrint('Agent replied: ${event['data']['content']}');
            }
            if (event['type'] == 'close') Navigator.of(context).maybePop();
          },
        );
      },
      onPermissionRequest: (controller, request) async => PermissionResponse(
        resources: request.resources,
        action: PermissionResponseAction.GRANT,
      ),
      shouldOverrideUrlLoading: (controller, action) async {
        final url = action.request.url;
        if (url == null || url.host == Uri.parse(agentUrl).host) {
          return NavigationActionPolicy.ALLOW;
        }
        await launchUrl(url, mode: LaunchMode.externalApplication);
        return NavigationActionPolicy.CANCEL;
      },
    );
  }
}