1.0.5 • Published 1 year ago
ribbit-connect v1.0.5
ribbit-connect
JavaScript library for integrating RIBBIT CONNECT into your webpage
Use a JavaScript framework? Here are a few more implementation methods we provide: 1. React 2. Angular (coming soon) 3. React Native (coming soon)
Install
Include the RIBBIT CONNECT script on your website.
<script src="https://portal.ribbit.ai/CONNECT.js"></script>With npm:
npm install --save ribbit-connectWith yarn:
yarn add ribbit-connectDocumentation
Please refer to the official RIBBIT CONNECT docs for more information.
Usage
//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) |