Widget customization

Customize your widgets to suit your needs.

Overview

To customize the widget on the dashboard, without code, use the App builder option.

However, you can still customize your widget with a few lines of code using two major options, which are BuildWithOptions or the BuildWithShortUrl method.

BuildWithOptions

This method allows you the freedom to hand-code the necessary parameters that are required to kickstart the SDK.
The advantage of using the BuildWithOptions is that you get to creatively customize the appearance, features, and lots more, hence it's the best choice for a developer that changes the look and feel of the widget frequently.

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')
    }
})

📘

Widget Properties

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

BuildWithShortUrl

This method takes away the sweat of customizing your widget in your text editor, instead, it gives you the privilege of leveraging the Okra widget builder to customize the appearance and features of your Widget, after customization, it presents a short-URL, which is a unique URL to embed in your integration.
Use this guide to learn how to use short URLs in your Flutter and Android integrations. Otherwise use this guide on any web integrations.
This method saves time and it's a no-code option.

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')
    }
})

Did this page help you?