Customization

Overview

Okra gives you the flexibility to fine-tune user interface elements to fit your specific use case. Using the App Builder tool in your dashboard. You can customize everything from your company logo, button text, and the products you want to fetch from your users when they connect.

Widgets customization can be done in two ways; Quickstart and Full Customisation. Let’s check out what each option provides:

Quickstart

Step 1: Select the services

First off, select the services you need (Authentication, Balance, Identity, Income, Transactions, Payment authorization).

Step 2: Fill in your app details

Provide an app name and the account types you’d like to connect to. A logo and a callback or redirect URL if you have some extra processing you’d like to do.

Step 3: Use the link

Once your app is created, click the view details button on the right and open the app settings.
Find your app link and start collecting data and payments from your customers.

Full Customization

With full customization, you can choose from a list of pre-configured use cases (Lending, Personal Finance, Digital Banking, Insurance, and Remittance) that fit your business.
The list helps narrow down the most important services your team would need.

Step 1: Choose from pre-configured lists

Step 2: Select from the list of products

Step 3: Add your app details

Step 4: Choose the type of institution/bank

BuildWithShortUrl

The end result of the App builder is a short-URL, which is a unique URL to embed in your integration.

import Okra from 'okra-js'

Okra.buildWithShortUrl({
    short_url: '', //Your short url from the app builder
    onSuccess: function(data){
        console.log('options success', data)
    },
    onClose: function(){
        console.log('options close')
    }
})

BuildWithOptions

Asides from utilizing the App builder you can customize the appearance of the widget programmatically.
This method allows you the freedom to hand-code the necessary parameters that are required to build a widget.

import Okra from 'okra-js'

Okra.buildWithOptions({
    name: 'Peter the Builder',
    env: 'production-sandbox',
    app_id: ''// app_id from your app builder
    key: '', // Your key from the Okra dashboard
    token: '', // Your token from the okra dashboard
    products: ['auth','identity','balance','transactions', 'income'], //in lowercase
    onSuccess: function(data){
        console.log('options success', data)
    },
    onClose: function(){
        console.log('options close')
    }
})

📘

Use this guide to learn how to use short URLs in your Flutter and Android integrations. Otherwise use this guide on any web integrations.

📘

For a comprehensive list of widgets properties for customization, see the docs.