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

# Vanilla JS SDK

> Truv Bridge SDK for vanilla JavaScript

**Package:** `@truv/bridge` | [npm](https://www.npmjs.com/package/@truv/bridge) | [GitHub](https://github.com/truvhq)

## Install

```bash theme={null}
npm install @truv/bridge
```

Or with yarn:

```bash theme={null}
yarn add @truv/bridge
```

***

## Embedded Orders

Use `isOrder: true` when initializing Bridge for multi-connection verification workflows (VOIE, VOE, VOA).

```javascript theme={null}
import TruvBridge from '@truv/bridge';

const bridge = TruvBridge.init({
  bridgeToken: 'your_bridge_token',
  isOrder: true,
  onLoad: function () {
    console.log('Order page loaded');
  },
  onSuccess: function () {
    console.log('User connected all accounts');
  },
  onClose: function () {
    console.log('Order page closed');
  },
  onEvent: function (type, payload, source) {
    console.log('Event:', type, 'Source:', source);

    if (type === 'COMPLETED' && source === 'order') {
      // Order reached final state — advance the user
      navigateToNextStep();
    }
  }
});

bridge.open();
```

<Warning>
  Wait for the `COMPLETED` event with `source: "order"` before advancing the user in your application. Do **not** use `onSuccess` or `onClose` to advance. The order may still have pending connections.
</Warning>

The `onEvent` callback receives a third `source` parameter that distinguishes order-page events from connection-widget events.

**Order page events** (`source: "order"`):

```javascript theme={null}
onEvent('LOAD', undefined, 'order')       // Fires same time as onLoad()
onEvent('CLOSE', undefined, 'order')      // Fires same time as onClose()
onEvent('SUCCESS', undefined, 'order')    // Fires same time as onSuccess()
onEvent('COMPLETED', undefined, 'order')  // Fires on final state (success or skipped)
```

**Connection widget events** (`source: "bridge"`):

```javascript theme={null}
onEvent(bridgeEventType, bridgeEventPayload, 'bridge');
```

See [Bridge Events](/developers/sdks/bridge-events) for the full list of connection widget event types and payloads.

### Position

The `position` parameter controls how the embedded order page is displayed. The default type is `'dialog'`.

* `{ type: 'dialog' }`: The bridge appears as a dialog window, which overlays the rest of the interface and disables scrolling.
* `{ type: 'inline', container: HTMLElement }`: The embedded order page is integrated within an existing element, allowing the interface to function without blocking the rest of the interface or global scrolling. Ensure that your interface functions seamlessly across various devices, particularly on mobile devices such as iPhones and Androids, including compatibility with virtual keyboards.

```javascript theme={null}
const bridge = TruvBridge.init({
  bridgeToken: '<token>',
  isOrder: true,
  position: {
    type: 'inline',
    container: document.querySelector('#inline-order-container')
  }
});
```

<Warning>
  There are important requirements when using inline position:

  1. The container element must remain stable while the bridge is open. The container and all its parent elements must not be unmounted or moved to a different parent node.
  2. You must manually close the bridge before removing the parent container, for example when navigating to another page in a single-page application without a full reload.
  3. Only one bridge instance can be open on the page at a time.
</Warning>

For inline frame sizing, automatic height, and modal launch behavior, see [Display Modes](/developers/integration/embedded-orders/display-modes).

***

## Bridge Widget

Use the Bridge Widget flow (without `isOrder`) for single-connection flows like Direct Deposit Switch and Paycheck Linked Lending.

```javascript theme={null}
import TruvBridge from '@truv/bridge';

const bridge = TruvBridge.init({
  bridgeToken: 'your_bridge_token',
  onSuccess: (publicToken, metaData) => {
    console.log('public_token:', publicToken);
    // Send publicToken to your backend for exchange
  },
  onClose: () => {
    console.log('Widget closed');
  }
});

bridge.open();
```