Bridget Widget Integration Guide

<iframe
  id="widget"
  src="https://embeded.bridgewise.com/en-US/bw/bridget-chat?accessToken=YOUR_TOKEN"
  style="width:100%; border:0; height:400px;"
>
</iframe>

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

[
  { 
    "t": "Give Tesla's price chart", 
    "q": "Show me chart for Tesla with technical indicators" 
  }
]

const baseUrl = "https://embeded.bridgewise.com/en-US/bw/bridget-chat";

// 1. Define the prompts
const examples = [
  { 
    t: "Give Tesla's price chart", 
    q: "Show me chart for Tesla"
  }
];

// 2. Encode
const encodedExamples = encodeURIComponent(JSON.stringify(examples));

// 3. Construct URL
const finalUrl = `${baseUrl}?bridget.examples=${encodedExamples}&accessToken=YOUR_TOKEN`;

console.log(finalUrl);

encodeURIComponent(JSON.stringify([
  { t: "Label Name", q: "The actual prompt sent to Bridget" }
]));

{
  "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 (for example, answer rendered).

Error inside the widget or underlying services.

Click events (clipboard, disclaimer, etc.).

Hover events (where supported).

Emitted instead of native navigation when actionType=external.

Security selected; use to navigate to your own stock / fund page.

{ message, companyId, primaryTickerSymbol }

Emitted when a teaser question is clicked in bridget-teaser. Use this to open bridget-chat and pass the prompt.

{ id: "trade", action: "confirm" | "cancel", instrument: { id, name, symbol, type } }

Emitted when a user interacts with the Call-to-action (trade) widget in the chat.

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 security selection
    if (message.type === "security-select") {
      const { ticker, exchange } = message.data;
      console.log("Security selected:", ticker, exchange);
    }

    // Handle Bridget teaser trigger
    if (message.type === "bridget-teaser-trigger") {
      const { message: teaserMessage, companyId, primaryTickerSymbol } = message.data;
      console.log("Teaser triggered:", teaserMessage);
    }

    // Handle Call-to-action (Trade)
    if (message.type === "click" && message.data?.id === "trade") {
      const { action, instrument } = message.data;
      console.log(`CTA ${action} for ${instrument.symbol}`);
    }

    // Handle clipboard (if bridget.event-clipboard=true)
    if (message.type === "click" && message.data?.id === "clipboard") {
      console.log("Copy to clipboard:", message.data.text);
    }
  } catch (e) {
    // Ignore invalid messages
  }
});

Native browser behavior. All links work as standard HTML links. When a user clicks on a security (stock, fund, etc.), they are redirected to the corresponding page on the Bridgewise platform.

Use case: When you want users to explore the full Bridgewise experience.

All navigation disabled. Clicking on any link or security does nothing. The widget becomes read-only in terms of navigation.

Use case: Demo environments, restricted access scenarios, or when you want to prevent any external navigation.

Full control for your application. Instead of navigating, the widget emits events that your application can intercept and handle according to your own routing logic.

When a user clicks a link, you receive a navigate event with the target URL. When they click a security, you receive a security-select event with ticker, exchange, and type information.

Use case: Keeping users within your application, navigating to your own stock/fund pages, or implementing custom routing.

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

class WidgetWebView(context: Context) : WebView(context) {
  init {
    settings.javaScriptEnabled = true
    settings.domStorageEnabled = true
    
    addJavascriptInterface(PostMessageHandler(), "AndroidInterface")
    
    webViewClient = object : WebViewClient() {
      override fun onPageFinished(view: WebView?, url: String?) {
        evaluateJavascript("""
          window.addEventListener('message', function(e) {
            if (e.origin !== 'https://embeded.bridgewise.com') return;
            AndroidInterface.handlePostMessage(JSON.stringify(e.data));
          }, false);
        """, null)
      }
    }
  }
  
  inner class PostMessageHandler {
    @JavascriptInterface
    fun handlePostMessage(data: String) {
      // Parse JSON, handle resize/navigation events
    }
  }
}

async function compress(str) {
  const blob = new Blob([str]);
  const stream = blob.stream().pipeThrough(
    new CompressionStream("gzip")
  );
  const compressed = await new Response(stream).arrayBuffer();
  return String.fromCharCode.apply(null, new Uint8Array(compressed));
}

async function encode(data) {
  const json = JSON.stringify(data);
  const compressed = await compress(json);
  const base64 = btoa(compressed);
  return encodeURIComponent("gz_" + base64);
}

{
  "id": "trade",
  "action": "confirm" | "cancel",
  "instrument": {
    "id": "string",
    "name": "string",
    "symbol": "Ticker",
    "type": "string"
  }
}