# ribbit-connect

> Vanilla JS library for RIBBIT CONNECT

Latest version **1.0.5** (published 2023-03-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install ribbit-connect
pnpm add ribbit-connect
yarn add ribbit-connect
bun add ribbit-connect
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-03-07 |
| First published | 2022-10-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 570.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Darryl Huffman |
| Maintainers | darrylhuffman |
| Keywords | ribbit, ribbit-connect, connect |

## Links

- npm: https://www.npmjs.com/package/ribbit-connect
- Repository: https://github.com/RIBBITai/ribbit-connect
- Homepage: https://github.com/RIBBITai/ribbit-connect#readme
- Issues: https://github.com/RIBBITai/ribbit-connect/issues
- npm.io page: https://npm.io/package/ribbit-connect

## Dependencies (1)

- [ribbit-connect-meta](https://npm.io/package/ribbit-connect-meta.md) ^1.0.1

## Recent versions

- 1.0.5 (latest) — 2023-03-07
- 1.0.4 — 2022-11-15
- 1.0.3 — 2022-11-14
- 1.0.2 — 2022-10-24
- 1.0.1 — 2022-10-24
- 1.0.0 — 2022-10-24

## README

# ribbit-connect
JavaScript library for integrating [RIBBIT CONNECT](https://test.RIBBIT.ai/CONNECT) into your webpage

Use a JavaScript framework? Here are a few more implementation methods we provide:
1.  [React](https://github.com/darrylhuffman/react-ribbit-connect)
2. Angular (coming soon)
3. React Native (coming soon)

## Install
Include the RIBBIT CONNECT script on your website. 

```html
<script src="https://portal.ribbit.ai/CONNECT.js"></script>
```

With ```npm```:
```
npm install --save ribbit-connect
```

With ```yarn```:
```
yarn add ribbit-connect
```


## Documentation
Please refer to the official [RIBBIT CONNECT](https://portal.ribbit.ai/Widgets/Integration) docs for more information.

## Usage
```js
//import  {  RIBBITConnect  }  from  "ribbit-connect"; // comment out only if you used npm or yarn to install

const CONNECT = new RIBBITConnect({
    target: 'ribbit-container', // id of any element within the </body> which you want CONNECT to initialize within
    token: this.token  // see documentation on how to get a token
})

CONNECT.open()

CONNECT.onExit(eventData => {
    CONNECT.close()
})

//CONNECT.onComplete(eventData => {
//    do something with eventData
//    console.log(eventData)
//})

```

### Methods

| Name | Description |
| ------- | --------|
| ```onMessage``` | Generic message handler that fires for every one of the events below ```function(eventName, eventData) => void```  
| ```onLaunch``` |  ```function(eventData) => void```  
| ```onExit``` | ```function(eventData) => void```  
| ```onComplete``` | ```function(eventData) => void```  
| ```onBankLoginSelected``` | ```function(eventData) => void```  
| ```onManualEnrollmentSelected``` | ```function(eventData) => void```  
| ```onNoAccountsFound``` | ```function(eventData) => void```  
| ```onBankNotFound``` | ```function(eventData) => void```  
| ```onBankLogin``` | ```function(eventData) => void```  
| ```onLinkOpen``` | ```function(eventData) => void``` 

### All Init Parameters
| Name | Type | Default | Description |
| ------- | ----- | --------- | --------|
| ```token``` | string |  | Token recieved from ```/CONNECT/session/``` endpoint
| ```open``` | boolean | false | Whether or not CONNECT should be open or not
| ```language``` | string | en | Optional language to be displayed to the user (Translation must be added within CONNECT settings. More coming soon.)
| ```className``` | string |  | Optional class to be added to the CONNECT container
| ```inline``` | boolean | false | Whether or not CONNECT should display inline (default is popup)
| ```fullscreen``` | boolean | false | Whether or not CONNECT should display in full-screen mode (for native/mobile app implementation)
| ```settings``` | object | | Additional settings (see below)

#### Settings
| Name | Type | Default | Description | 
| ------- | ----- | --------- | --------|
| ```curtainColor``` | string |  | Color of the popup background curtain. Examples: ```#FFF``` and ```rgba(0,0,0,0.5)```
| ```curtainAllowClose``` | boolean | true | Whether or not the user clicking on the popup background curtain should close the CONNECT popup
| ```closeButton``` | boolean | false | Whether a close button should display in the top right corner of the widget. (on click fires the onExit method)

---
_Source: https://npm.io/package/ribbit-connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._