> ## Documentation Index > Fetch the complete documentation index at: https://docs.truv.com/llms.txt > Use this file to discover all available pages before exploring further. # Bridge Widget Overview > The client-side widget for secure account connections Widget - income verification Truv Bridge is a drop-in client-side widget that handles the entire account connection flow: employer/bank search, credential entry, multi-factor authentication, and error handling. You embed it in your frontend; Truv manages the UI. Bridge is used in two ways: | Integration | Use case | How Bridge gets a token | | ------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------- | | [Embedded Orders](/developers/integration/embedded-orders/overview) | Income, employment, assets (multi-connection) | Order API returns `bridge_token` | | [Bridge Widget](/developers/integration/bridge-widget/new-user) | Direct Deposit Switch (DDS), Paycheck Linked Lending (PLL) (single connection) | Bridge Token API returns `bridge_token` | *** ## Platform support | Platform | Package | | ---------------- | ----------------------------------------------- | | **Web** | ` ``` *** ## Parameters | Parameter | Required | Description | | ------------- | -------- | ----------------------------------------------------------------------------------------------------- | | `bridgeToken` | Yes | The `bridge_token` value returned by [Create Bridge Token](/api-reference/bridge-token/users_tokens). | | `position` | No | Display mode configuration. Default is `dialog`. See [Set the position](#set-the-position). | *** ## Set the position The `position` parameter controls how Bridge renders on the page. Bridge: Dialog mode vs. Inline mode ### Dialog (default) Bridge opens as a centered overlay and disables page scrolling. ```javascript theme={null} const bridge = TruvBridge.init({ bridgeToken: bridgeToken, position: { type: 'dialog' }, // callbacks... }); ``` ### Inline Bridge embeds inside an existing DOM element. Use this for seamless page layouts. ```javascript theme={null} const container = document.getElementById('bridge-container'); const bridge = TruvBridge.init({ bridgeToken: bridgeToken, position: { type: 'inline', container: container }, // callbacks... }); ``` Inline mode requires the container element to exist in the DOM before calling `TruvBridge.init`. *** ## Close Bridge programmatically Call `bridge.close()` to dismiss the widget from your code. ```javascript theme={null} const bridge = TruvBridge.init({ bridgeToken: bridgeToken, // callbacks... }); // Close the widget after a timeout or user action bridge.close(); ``` ### Close options `bridge.close()` accepts an optional `{ mode }` parameter that controls which frames are dismissed. | `mode` | Behavior | | ----------------- | ------------------------------------------------------------------------------- | | `'all'` (default) | Closes the widget unconditionally. Equivalent to `bridge.close()`. | | `'onlyModal'` | Closes only frames rendered as a modal/dialog. Inline frames are left in place. | ```javascript theme={null} bridge.close(); // closes everything bridge.close({ mode: 'all' }); // same as bridge.close() bridge.close({ mode: 'onlyModal' }); // dismisses modal layers only ``` Behavior matrix:
isOrder position.type mode: 'all' mode: 'onlyModal'
false dialog Closes the modal Bridge Closes the modal Bridge
false inline Removes the inline Bridge from the page **No-op**
true dialog Closes the modal order page and the inner connection widget Closes the modal order page and the inner connection widget
true inline Removes the inline order page and closes the inner connection widget **Closes the inner connection widget; leaves the inline order page mounted**
Use `mode: 'onlyModal'` when your app needs to display its own modal (for example, a session-timeout dialog) on top of an inline Embedded Order. Without dismissing the inner connection widget first, your dialog would be unreachable behind it. *** ## Callbacks | Callback | When it fires | | ----------- | --------------------------------------- | | `onSuccess` | User successfully connected an account | | `onLoad` | Bridge widget finished loading | | `onClose` | User closed the widget | | `onEvent` | Any interaction event, including errors | Errors surface through `onEvent` with `type=ERROR` and an [`ErrorData`](/developers/sdks/bridge-events#errordata) payload — there is no separate `onError` callback. See [Bridge events](/developers/sdks/bridge-events) for the full list of event types and payloads. *** ## Customize the widget Customize Bridge appearance through [Customization Templates](/developers/customization) in the Dashboard: company branding, search experience, success pages, document upload settings, and privacy agreements. *** ## Next steps Multi-connection verification (VOIE, VOA, VOE) Single-connection flow (DDS, PLL) Bundle income, deposit switch, and PLL in one Bridge session Platform-specific installation guides