Portal, Widgets, and APIs

Amberflo Customer Usage and Billing Portal is a feature where an account can extend Amberflo's features to its customers.

Customer Usage and Billing Portal has the following applications:

1. Customer Usage and Billing Portal APIs
2. Fully Hosted Amberflo.io Customer Usage and Billing Portal web application.
3. Amberflo embeddable UI components:
   • For a React.js integration see UI Kit library integration .
   • For a Vanilla Javascript integration see SDK library integration.

Workflow

1. Authenticate the customer user in your app.
2. Call Customer Usage and Billing Portal Session API with the customer ID and your API key to generate a customer-specific session. See Customer Usage and Billing Portal Session.
3. Use that session token in any of the Customer Usage and Billing Portal apps.

Customer Usage and Billing Portal Session

The API key is used to authenticate an Amberflo account when calling APIs. With the API key, an account can access all customer's data. For Customer Usage and Billing Portal, however, we need customer information to limit the scope of the data to that customer.

In order for a customer to login into the Customer Usage and Billing Portal, a session token is required. This token encapsulates both the Amberflo's account ID and customer ID. The account's app will authenticate the customer in their app, and then call the Session API with the customer ID. In other words, the Session API enables Single Sign On (SSO) between the account's app and Amberflo's Customer Usage and Billing Portal apps.

The customer ID needs to exist in Amberflo.io.

Session endpoint: https://app.amberflo.io/session

API Reference https://amberflo.readme.io/reference/post_session

curl --location --request POST 'https://app.amberflo.io/session' \
--header 'Content-Type: application/json' \
--header 'X-API-KEY: IdToken {{API-KEY}}' \
--data-raw '{
    "customerId": "bca5be25-f145-4448-b85c-1236dce1a2ac",
    "expirationEpochMilliSeconds": 1644004025153,
    "returnUrl":"https://StarkIndustries.com/"
}'

API Response:

{
    "url": "https://portal.amberflo.io/session/9cd47871391814249841843c2fd82c6483f2c47bbc7f2c1fba6f975f1f9d7599605c4a580f99?returnUrl=https%3A%2F%2FStarkIndustries.com%2F",
    "sessionToken": "9cd47871391814249841843c2fd82c6483f2c47bbc7f2c1fba6f975f1f9d7599605c4a580f99"
}

The response returns the sessionToken and the URL of the landing page of the Customer Usage and Billing Portal web app.

The sessionToken can be used for calling Customer Usage and Billing Portal APIs using the session in the X-API-KEY header or using the Amberflo ui-kit.

The url includes the session token and the returnUrl to return to your homepage. This link will be rendered in the Customer Portal web app, so when the user clicks on it they will be returned to your app.

sessionToken can now be used to call Customer Usage and Billing Portal APIs.

Adding a Custom Business Logo

If you choose our fully hosted Amberflo.io Customer Usage and Billing Portal web application, you have the ability to add your business logo.

To do this, first go to Amberflo.io Settings -> Business -> Branding and click the + button. Choose a PNG, JPG or SVG file that is less than 1MB.

A preview of what your new customer portal header will look like will appear after uploading your new logo.

You now have a custom business logo being displayed in your customer portal

Customer Portal Customization

You can configure which items to show in Customer Portal. To do this, go to Amberflo.io Integrations -> Customer Portal

For Usage Explorer you can also select which meters you would like to display.