Integration

Learn how you can integrate the Okra Widget

Okra offers a set of libraries and SDKs that you can use to launch the Okra Widget in your web or mobile applications. Check out the catalog of Libraries and SDKs for the available languanges and platforms. These libraries and SDKs can launch a Widget instance in your app or website through two functions: buildWithShortUrl and buildWithOptions.

Whether you created and customized your Widget using the App Builder or via the API, you only need to the resulting short_url, or code snippet to integrate the Widget into your application.

Build with short_url

This option provides a quick and simple way to directly integrate the widget you already customized into your app or website.

short_url is a unique URL that identifies a Widget that you created.

  • If you used the App Builder to create your Widget experience, you can find the short_url in the Dashboard. Open the App Integration tab under the detailed view of your app.
  • If you created a Link via the API, you can find the short_url of your app in the response payload, in the link.url field, in this format: https://app.okra.ng/{short_url}

Example

  Okra.buildWithShortUrl({
    short_url: '{Your short_url}',
    onSuccess: function(data){
        console.log('success', data)
    },
    onClose: function(){
        console.log('closed')
    }
  })

Build with options

This method enables you to further customize the Widget before initialization. You can programmatically set up the parameters that build the Widget according to your use case or business needs.

Check out the complete list of Widget properties that you can use.

Example

  Okra.buildWithOptions({
        name: '{Your app name}',
        env: 'production',
        key: '{Your API key, according to the environment you use}',
        token: '{Your Client token}',
        callback_url: '',
        redirect_url: '',
        currency: 'NGN',
        logo: 'https://okra-products-pdf.s3.eu-west-3.amazonaws.com/okraprod_228.png'
        onSuccess: function(data){
            console.log('success', data)
        },
        onClose: function(){
            console.log('closed')
        }
  })

Integration code snippets

To ensure a smooth integration process and reduce your time to production, Okra provides ready-to-use code snippets for most of the supported platforms. These code snippets are specific and unique for each Widget that you create, minimizing the chance of error.

Visit the Dashboard to get started!

  1. Open the Apps page and select the Widget that you want to integrate.
  2. Click on View Details and open the App Integration tab.

📘

The App Integration tab provides code snippets for both the build with short_url, and the build with options scenarios.

Need help?

  1. Check out the Widget Errors guide to understand the different error scenarios.
  2. Join Okra's Developer Community on Slack if you have technical questions or need help with your code.
  3. Get in touch with the Support team if you have any questions about Okra's products.