Overview

This guide shows you how to embed your custom financial widget into your application using an iframe. Your widget is accessible via a single URL that handles data fetching, theming, and emits real-time events back to your application.

What you can do:

• 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

Quick start

Basic iframe integration with auto-resize:

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

URL structure

Base path uses path params and query params:

• Path: /:language/:tenant/:widgetName

• Query: ?accessToken=...&identifier=...&identifierType=...&mode=...&actionType=...&sessionId=...&userId=...

Example:

https://embeded.bridgewise.com/he-IL/YOUR_TENANT/stock-report-page?accessToken=YOUR_TOKEN&identifier=AAPL-NASDAQ&mode=lightoo&actionType=external

Important: 

• Replace YOUR_TOKEN and AAPL_NASDAQ with your actual access token. 

• To start integrating Bridgewise widgets, you’ll need an access token. Please follow the instructions in our Authentication Guide to generate your token.
  
  

Properties (configuration)

All configurable parameters accepted by the iframe. “Path” refers to the URL path segment; “Query” refers to the querystring.

Notes:

• Stock widgets accept identifiers and may require identifierType depending on your identifier format.

• Fund widgets accept identifiers and may require identifierType depending on your identifier format.

Selection behavior (actionType)

• default: Selection will redirect to the report page on BridgeWise platform.

• external: Widget emits on-security-select-<widgetName> to the host app; host should handle navigation.

• prevent: Clicks are ignored for navigation and no selection event is emitted.

Exposed events (postMessage)

The iframe posts JSON-serialized messages to window.parent. Each message has the shape:

{ "event": "on-<name>-<widgetName>", "data": { ... } }

Events currently emitted:

• Load/resize

  • on-load-<widgetName>: { height: number }

  • on-resize-<widgetName>: { height: number }

• Interaction

  • on-click-<widgetName>: { id: string, ...widgetSpecific }

  • on-hover-<widgetName>: { id: string, ...widgetSpecific }

• Selection (emitted only when actionType=external)

  • on-security-select-<widgetName>: { id: string, ticker?: string, exchange?: string, type: 'fund' | 'stock' }

• Bridget Teaser

  • on-bridget-teaser-trigger-<widgetName>: { companyId: number | null, message: string, primaryTickerSymbol: string | null }

• Status

  • on-success-<widgetName>: { height: number }

  • on-error-<widgetName>: { message: string, status: number, data?: unknown, height: number }

Example event handling:

window.addEventListener("message", function (event) {

  if (event.origin !== "https://embeded.bridgewise.com") return;

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

  console.log("Widget event:", message.event, message.data);

});

Handle user interactions (optional)

To capture when users click on securities in the widget:

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 (requires actionType=external)

    if (message.event && message.event.includes("security-select")) {

      const { id, ticker, exchange } = message.data;

      console.log("User selected:", ticker, exchange);

      // Redirect to your security page or open modal

    }

    // Handle Bridget teaser trigger

    if (message.event && message.event.includes("bridget-teaser-trigger")) {

      const {

        companyId,

        message: teaserMessage,

        primaryTickerSymbol,

      } = message.data;

      console.log("Bridget teaser triggered:", {

        companyId,

        teaserMessage,

        primaryTickerSymbol,

      });

      // Handle Bridget teaser interaction (e.g., show chat modal, navigate to AI insights)

    }

  } catch (e) {

    // Ignore invalid messages

  }

});

Theming and styling

• Set mode=dark to enable dark theme; omit or set mode=light for light theme.

• The host page should set iframe { width: 100%; border: 0; } and rely on resize events to set height.

Localization

• Provide the language path param (e.g., en-US, he-IL). Widgets may internally fall back to a default language where needed.

Error handling

• Invalid tenant or widget names render a friendly error screen inside the iframe.

• Missing accessToken produces an error; listen for on-error-<widgetName> to surface it in the host app.

Security considerations

• Always validate event.origin in your message listener to accept only your iframe host domain.

• accessToken is passed via querystring; prefer short-lived tokens over long-lived ones.

Notes

• Event names are suffixed with the widgetName to let you distinguish multiple iframes on the same page.

• Additional events like language fallbacks may be introduced; follow the on-*-<widgetName> convention.