UI Kit SDK

SDK library integration

Suggest Edits

The Amberflo UI Kit SDK is a Vanilla Javascript development kit for our customers to be able to consume and make use of principal Amberflo views, for one of their customers, on their own site.

The SDK is responsible for making the API calls and rendering the components on a destination <div> on the final HTML code.

📘

Requisites

These are some of the languages where the SDK can be used: in React, Javascript, Angular, Vue.

Getting Started

  1. Include the script in the <head> of your site:
<script
  type="module"
  src="https://js.amberflo.io/index.1.0.10.js"
></script>

📘

Make sure to use to the latest available version in the script (e.g.: 1.0.10). You can check versions under Releases section.

  1. Retrieve your session token to access Amberflo API endpoints. With that session id, you will need to make a new instance of the AmberfloSDK included on the script above. To do that, you will have to add this code snippet under the first script tag you added:
<script>
  window.onload = () => {
    amberflo = new AmberfloSDK("{{YOUR_SESSION_TOKEN}}");
  };
</script>

📘

Replace {{YOUR_SESSION_TOKEN}} with the token you got. To know more about how to get your session token read Get Session Token section.

  1. Since sessions can expire, on your new instance of AmberfloSDK there is a method to set the new sessionId. You can call it anytime to amberflo.setSessionId("{{YOUR_NEW_SESSION_TOKEN}}");.
    The app will continue to work the same with the same ID.

  2. To add a new Amberflo view, you will need to place a <div> on your code, with the class amberflo and a data-amberflo-type attribute to setup the element. This data-amberflo-type attribute is responsible for rendering the different views that we support.
    You can also add a color, to customize the component, by adding data-amberflo-colors. By Default it will use Amberflo colors. If you provide a different color, it will create a palette based on that color

<div
  class="amberflo"
  data-amberflo-type="usage-table"
  data-amberflo-colors="#1565c0"
></div>

Some views may require to use other attributes. Attributes can be updated programmatically at any time to render a different view or state. For example, you can render a Usage Table with a meter, and when you click a button, change that attribute to render the same view but with a different meter.

Get Session Token

You must create a session token to interact with Amberflo, either directly with the API or through the AmberfloSDK.

To do so, you can retrieve it from an endpoint on your server using the browser’s fetch function on the client side. This is generally the best approach when your client side is a single page application, especially if it’s built with a modern frontend framework such as React.

For more information check API Reference

This example shows how to create the server endpoint that serves the client secret:

const express = require('express');
const app = express();
const request = require('request');

app.get('/amberflo-session', async (req, res) => {
  request({
    method: 'POST',
    uri: 'http://app.amberflo.io/session',
    body: {
      "customerId": "{{DESIRED_CUSTOMER_ID}},
      "expirationEpochMilliSeconds": {{EXPIRATION_DATE_IN_MILLISECONDS}}
    },
    headers: {
      "X-API-KEY": "{{YOUR_API_KEY}}"
    }
  }, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            res.json({ sessionToken: response.sessionToken })
        }
    }
  );
})

📘

The above example is in Node.js.

You can get X-API-KEY from Amberflo site inside Settings -> Account -> API keys.

15261526

You can also get the customerId from Amberflo site inside Customers → Click on one customer → Copy Customer ID.

14621462

This example demonstrate how to fetch the session token with JavaScript in the client side:

const response = fetch('/amberflo-session').then(function(response) {
  return response.json();
}).then(function(responseJSON) {
  const sessionToken = responseJson.sessionToken
})

SDK Versions

📘

Releases

07/29/2022 - Version 1.0.10
07/12/2022 - Version 1.0.9
07/07/2022 - Version 1.0.8
07/06/2022 - Version 1.0.7
06/07/2022 - Version 1.0.6
05/09/2022 - Version 1.0.5
05/07/2022 - Version 1.0.4
04/26/2022 - Version 1.0.3
04/21/2022 - Version 1.0.2
04/20/2022 - Version 1.0.1
04/13/2022 - Version 1.0.0

Available Views


Usage Table

18801880

Attribute

Value

data-amberflo-type

usage-table

data-amberflo-meters

Comma separated meters apiNames you want to see on the table.

e.g.:
ApiCalls,cluster_count,cluster_instance_hours,cluster_partitions,cluster_reads,cluster_storage,cluster_writes,CpuHours,DataVolumeGb,number_of_runs

Example:

<div
  class="amberflo"
  data-amberflo-type="usage-table"
  data-amberflo-meters="ApiCalls,cluster_count,cluster_instance_hours,cluster_partitions,cluster_reads,cluster_storage,cluster_writes,CpuHours,DataVolumeGb,number_of_runs"
></div>

Usage Graph

18851885

Attribute

Value

data-amberflo-type

usage-graph

data-amberflo-meters

A single meter apiName you want to see on the graph.

e.g.:

ApiCalls

Example

<div
  class="amberflo"
  data-amberflo-type="usage-graph"
  data-amberflo-meter="ApiCalls"
></div>

Cost Table

16301630

Attribute

Value

data-amberflo-type

cost-table

Example

<div
  class="amberflo"
  data-amberflo-type="cost-table"
></div>

Invoice Details

736736

Attribute

Value

data-amberflo-type

invoice-details

data-amberflo-invoice-date="1/30/2022"

The date of the invoice in format l - M/D/YYYY - 1/9/2022

Example

<div
  class="amberflo"
  data-amberflo-type="invoice-details"
  data-amberflo-invoice-date="1/9/2022"
></div>

Invoices List

800800

Attribute

Value

data-amberflo-type

invoice-list

Example

<div
  class="amberflo"
  data-amberflo-type="invoices-list"
></div>

Prepaid Summary

794794

Attribute

Value

data-amberflo-type

prepaid-summary

Example

<div
  class="amberflo"
  data-amberflo-type="prepaid-summary"
></div>

Prepaid Wallet

804804

Attribute

Value

data-amberflo-type

prepaid-table

Example

<div
  class="amberflo"
  data-amberflo-type="prepaid-table"
></div>

Stripe Payment Method

10861086

Attribute

Value

data-amberflo-type

stripe-payment-method

data-amberflo-publishable-key

Publishable key from stripe. You can get it by following the steps detailed below.

data-amberflo-button-text

This is the button text, where your customer will have to click to submit their credit card.

data-amberflo-return-url

This is the URL where user will be taken after filling the credit card value, and everything worked.

<div
  class="amberflo"
  data-amberflo-type="stripe-payment-method"
  data-amberflo-publishable-key="pk_test_62MIq3eFMMJsb2ZF6ivl10ycy6kVNhPau9QnrwJE649HGEEz3vZNDo5XA5I6ZdHRosbjGq8eAGPBrE0wrl7Q0Fxn1i00CaNu0Ar"
  data-amberflo-button-text="Submit"
  data-amberflo-return-url="https://mysite.com/stripe"
  data-amberflo-colors="#1565c0"
></div>

How to get the publishable key

  • Go to stripe.com and login with your username and password
  • Once inside Stripe, go to Dashboard
  • Inside the dashboard copy the publishable key. Check the image below for reference:

17831783

Pricing Plan

561561

Attribute

Value

data-amberflo-type

pricing-plan

data-amberflo-pricing-plan

Pricing Plan ID

data-amberflo-title

Pricing Plan title. It could be the same as the pricing plan itself, or some other text

data-amberflo-product-item-lines

Comma separated strings for each line row

data-amberflo-fixed-price

Boolean defining if the plan has or not a fixed price

data-amberflo-price

String saying the fixed price of the plan. Only mandatory if fixed price is true.

Example

<div
  class="amberflo"
  data-amberflo-type="pricing-plan"
  data-amberflo-pricing-plan="65ad692f-b7ae-4886-ab8a-3d0146d0817d"
  data-amberflo-title="Plan Name"
  data-amberflo-product-item-lines="30$ / GB,Custom  Text"
  data-amberflo-fixed-price="true"
  data-amberflo-price="$40 Fixed Price"
  data-amberflo-colors="#0078D4"
></div>

Updated 13 days ago