Widget Integration Guide

• Embed the widget using a simple iframe

• Configure language, theme, security identifiers, and user behavior

• Listen to widget events (load, resize, user interactions, errors)

• Handle security selections in your application (when enabled)

• Auto-resize the widget based on content

<iframe
  id="widget"
  src="https://embeded.bridgewise.com/en-US/TENANT_NAME/WIDGET_NAME?accessToken=YOUR_TOKEN&identifier=IDENTIFIER"
  style="width:100%; border:0; height:400px;"
>
</iframe>

<script>
  window.addEventListener("message", function (event) {
    if (event.origin !== "https://embeded.bridgewise.com") return;

    try {
      const message = JSON.parse(event.data);
      if (message.event && message.data && message.data.height) {
        document.getElementById("widget").style.height =
          message.data.height + "px";
      }
    } catch (e) {
      // Ignore invalid messages
    }
  });
</script>

https://embeded.bridgewise.com/{language}/{tenant}/{widgetName}?accessToken=...&identifier=...&identifierType=...&mode=...&actionType=...&sessionId=...&userId=...&scoringMethod=...

{
  "event": "on-<eventName>-<widgetName>",
  "type": "<eventName>",
  "widget": "<widgetName>",
  "data": { ... }  // event-specific payload
}

Widget fully loaded; provides suggested height.

Content height changed; use for auto-resize.

Successful state update (e.g., answer rendered).

Error inside the widget or underlying services.

Click events (clipboard, disclaimer, etc.).

Hover events (where supported).

Emitted when onLinkClick callback is provided.

Emitted only when actionType=external.

{
  "event": "on-click-restricted",
  "type": "click",
  "widget": "restricted",
  "data": { "id": "deposit_now" }
}

window.addEventListener("message", function (event) {
  if (event.origin !== "https://embeded.bridgewise.com") return;

  try {
    const message = JSON.parse(event.data);

    // Auto-resize
    if (message.data && message.data.height) {
      document.getElementById("widget").style.height =
        message.data.height + "px";
    }

    // Handle click events (id is widget-specific)
    if (message.type === "click") {
      const { id } = message.data;
      console.log("Clicked:", id);
    }

    // Handle security selection
    if (message.type === "security-select") {
      const { ticker, exchange } = message.data;
      console.log("Security selected:", ticker, exchange);
    }

    // Handle errors
    if (message.type === "error") {
      console.error("Widget error:", message.data);
    }
  } catch (e) {
    // Ignore invalid messages
  }
});

struct WidgetView: UIViewRepresentable {
  @Binding var height: CGFloat
  let widgetURL: String

  func makeUIView(context: Context) -> WKWebView {
    let config = WKWebViewConfiguration()
    let controller = WKUserContentController()
    
    // Bridge postMessage -> webkit messageHandler
    let script = """
      window.addEventListener('message', function(e) {
        if (e.origin !== 'https://embeded.bridgewise.com') return;
        webkit.messageHandlers.postMessage.postMessage(e.data);
      }, false);
    """
    controller.addUserScript(WKUserScript(
      source: script,
      injectionTime: .atDocumentStart,
      forMainFrameOnly: false
    ))
    config.userContentController = controller
    
    let webView = WKWebView(frame: .zero, configuration: config)
    webView.load(URLRequest(url: URL(string: widgetURL)!))
    return webView
  }
}

• Use WKWebView with WKUserContentController for postMessage handling

• Inject JavaScript to bridge iframe postMessage to webkit messageHandler

• Handle height changes to dynamically resize the widget

• Validate message origin for security

• Disable WebView scrolling if you want the widget to control its own height

class WidgetWebView @JvmOverloads constructor(
  context: Context,
  attrs: AttributeSet? = null
) : WebView(context, attrs) {

  init {
    setupWebView()
  }

  @SuppressLint("SetJavaScriptEnabled")
  private fun setupWebView() {
    settings.apply {
      javaScriptEnabled = true
      domStorageEnabled = true
    }

    // Add JavaScript interface for postMessage handling
    addJavascriptInterface(PostMessageHandler(), "AndroidInterface")

    webViewClient = object : WebViewClient() {
      override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        
        // Inject JavaScript to capture iframe postMessage
        val script = """
          window.addEventListener('message', function(event) {
            if (event.origin !== 'https://embeded.bridgewise.com') return;
            AndroidInterface.handlePostMessage(JSON.stringify(event.data));
          }, false);
        """
        evaluateJavascript(script, null)
      }
    }
  }

  inner class PostMessageHandler {
    @JavascriptInterface
    fun handlePostMessage(messageData: String) {
      // Parse and handle messages
    }
  }
}

• Enable JavaScript and DOM storage in WebView settings

• Use @JavascriptInterface to create a bridge for postMessage handling

• Inject JavaScript after page load to capture iframe messages

• Convert pixel heights using display density for proper sizing

• Handle events on the main thread using post()