# Setup Guide

### Bridge Widget

The Bridge widget is a drop-in framework that handles on\off ramping of NGN. It works with vanilla JavaScript and all major JavaScript frameworks.

### Getting Started

1. Sign up at <mark style="color:green;">(</mark>[<mark style="color:green;">ngnc.online/user/kyb</mark>](https://ngnc.online/user/kyb)<mark style="color:green;">),</mark> once your NGNC account has been activated you will be eligible to access NGNC Bridge and customize the bridge widget to fit your business.
2. Update your Bridge widget setup with your public key from the bridge credentials page.

### Installation

Using NPM

```bash
npm install @ngnc/bridge
```

Using Yarn

```bash
yarn add @ngnc/bridge
```

Using unpkg CDN

```html
<script src="https://unpkg.com/@ngnc/bridge"></script>
```

Import it into your project

```javascript
import Bridge from "@ngnc/bridge"
```

### Parameters

* [key](#undefined)
* type
* [data](#data)
* [onLoad](#onload)
* [onSuccess](#undefined)
* [onEvent](#undefined)
* [onClose](#undefined)

### key

This is your Bridge public key from the Bridge dashboard&#x20;

```javascript
const widget = new Bridge({ key: "Bridge_Public_Key" });
```

{% hint style="info" %}
Your key is required
{% endhint %}

### type

Enter the transaction type (buy / sell)

```javascript
const widget = new Bridge({ key: "Bridge_Public_Key", type: "TYPE" });
```

{% hint style="info" %}
The type of transaction is required
{% endhint %}

### data

Parse in the transaction data to be sent&#x20;

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
})
```

{% hint style="info" %}
The data object is required
{% endhint %}

### onSuccess

This function is triggered when a user successfully performs a transaction.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    onSuccess: (response) => console.log(response)
})
```

{% hint style="info" %}
This function is required
{% endhint %}

### onLoad

This function is invoked when the widget has been mounted unto the DOM. You can handle toggling your trigger button within this callback.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onLoad: () => console.log("Bridge widget loaded successfully")
});
```

### onEvent

This method is called when certain events in the NGNC Bridge flow have occurred, for example, when the widget launches or when a transaction is successfully complete. This enables your application to gain further insight into the NGNC Bridge onboarding flow.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onEvent: (eventName, eventDetail) => {
        console.log(eventName);
        console.log(eventDetail);
    }
})
```

### onClose

This function is called when the user exit the bridge widget flow.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onClose: () => console.log("Bridge widget has been closed")
})
```

### setup()

This method is used to load the widget onto the DOM, the widget remains hidden after invoking this function until the `open()` method is called.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response)
})

widget.setup();
```

### open()

This method makes the widget visible to the user.

```javascript
const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response)
})

widget.setup();
widget.open();
```

### Event Name

Event names correspond to the type key returned by the raw event data. Possible options are in the table below.

<table><thead><tr><th width="316.5">Event name</th><th>Description</th></tr></thead><tbody><tr><td>OPENED</td><td>Triggered when the user opens the Bridge Widget.</td></tr><tr><td>AUTH__CREDENTIALS</td><td>Triggered when authenticating the API key</td></tr><tr><td>AUTH__SUCCESS</td><td>Triggered when the API key is valid</td></tr><tr><td>ERROR</td><td>Triggered when the widget reports an error.</td></tr><tr><td>NETWORK__SELECTED</td><td>Triggered when the user selects a network</td></tr><tr><td>LINKTAG__FOUND</td><td>Triggered when the users LINK_Tag is valid</td></tr><tr><td>TRANSACTION__SUCCESS</td><td>Triggered when a transaction is successful</td></tr><tr><td>TRANSACTION__FAILED</td><td>Triggered when a transaction fails</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://link-product.gitbook.io/ngnc/integration-guides/bridge-widget/setup-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.