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-connect

With yarn:

yarn add ribbit-connect

Documentation

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)