` element in your HTML. 📘 ***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 `` of your site: ```html ``` ***📘 Make sure to use to the latest available version in the script (e.g.: 1.0.30). You can check versions under Releases section.*** 2\. 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: ```html ``` ***📘Replace ***`{{YOUR_SESSION_TOKEN}} `***with the token you got. For example, if you received a session token that was ***`1234abcd`***, you would instantiate the Amberflo SDK like so: ***`amberflo = new AmberfloSDK("1234abcd").`*** To know more about how to get your session token read ***[Get Session Token](docId\:I2mADjtkAuAs4YNxv2uNs)***.*** 3\. 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. 4\. To add a new Amberflo view, you will need to place a `

` 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 further personalize each component by adding attributes to the `

`: - `data-amberflo-colors` – Set a HEX or color name to define the primary brand color. Defaults to Amberflo's color palette. - `data-amberflo-font-size` – Set a base font size (e.g., 16). Component fonts will scale proportionally. - `data-amberflo-font-family` – Provide a comma-separated list of fonts. The browser will use the first available font. - `data-amberflo-font-custom` – Import a Google Font if it’s not already supported. This must be used together with data-amberflo-font-family. - `data-amberflo-with-container` – "true" or "false". If "true", a container box is displayed around the widget. - `data-amberflo-with-title` – "true" or "false". If "true", the widget title is shown (container must also be enabled). - `data-amberflo-title` – Set a custom title for the widget. If omitted, the default title is used. All customization attributes are optional. If not specified, Amberflo’s default design system will be applied. ```html

``` Some views may require additional attributes depending on the data they display. These attributes can be updated programmatically at any time to render a different view or change the current state. For example, you can initially display a **Usage Table** for one meter and then update the view dynamically—such as when a user clicks a button—to show data for a different meter without reloading the page. ## Get Session Token To interact with Amberflo—whether through the API or the AmberfloSDK—you must first create a session token. The recommended approach is to retrieve this token from a backend endpoint on your server using the browser’s `fetch` function on the client side. This method works particularly well for single-page applications, especially those built with modern frontend frameworks like React. For more information check out our [Create a session API](docId\:p_45dCxEKUOsbG4vBhz06) This example shows how to create the **server endpoint** that serves the client secret: ```javascript 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 the Amberflo site inside **Settings -> Account Configurations -> API keys.** ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/rm-xYN1uDJd28ogS3t9n8_image.png) You can also get the `customerId` from Amberflo site inside **Customers → Click on one customer → Copy Customer ID.** ![](https://files.readme.io/ec76595-customer-id.png) This example demonstrate how to **fetch the session token** with JavaScript in the client side: ```javascript const response = fetch('/amberflo-session').then(function(response) { return response.json(); }).then(function(responseJSON) { const sessionToken = responseJson.sessionToken }) ``` ## Using an Event As you explore the [Available Views](docId\:kIPKru3tyXh4axofLKCFG) , you’ll notice that some of them support events. For example, the Usage Table view includes a `datechange` event that fires when the date is changed using the date picker. These events give you the flexibility to trigger additional actions in your app whenever a supported interaction occurs within an Amberflo view. Here is an example of how to use an event using the `datechange` event with the Usage Table view: ```html

``` ## Invoice-related Options Several views in Amberflo—such as the Invoices List and Invoice Details—display invoice-related data. You can customize how this data appears by adjusting settings under [Amberflo → Settings → Invoice](https://ui.amberflo.io/settings/invoice). There are currently two configurable options: **Displaying cached invoices** You can choose whether the data shown in invoice views is retrieved in real-time or from a cached version. Using cached data helps improve performance and speeds up invoice rendering. **Grouping product items on invoices** Amberflo allows you to organize product items into categories. These categories appear on the invoice to make it easier to understand grouped usage and charges. ## SDK Versions ***📘 ***Releases ***01/19/2024 - Version 1.0.30*** ***01/16/2024 - Version 1.0.29*** ***01/10/2024 - Version 1.0.28*** ***08/04/2023 - Version 1.0.27*** ***08/04/2023 - Version 1.0.26*** ***07/12/2023 - Version 1.0.25*** ***02/06/2023 - Version 1.0.24*** ***01/09/2023 - Version 1.0.23*** ***12/27/2022 - Version 1.0.22*** ***12/20/2022 - Version 1.0.21*** ***12/15/2022 - Version 1.0.20*** ***12/08/2022 - Version 1.0.19*** ***11/24/2022 - Version 1.0.18*** ***10/20/2022 - Version 1.0.17*** ***10/12/2022 - Version 1.0.16*** ***10/04/2022 - Version 1.0.15*** ***09/14/2022 - Version 1.0.14*** ***09/12/2022 - Version 1.0.13*** ***09/01/2022 - Version 1.0.12*** ***08/29/2022 - Version 1.0.11*** ***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 ![](https://files.readme.io/e6b46f9-usage-table.png) | **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 | | | | ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/fHT2oSUhBLM2l8_Phnkwp_image.png) Example: ```html

``` ### Usage Graph ![](https://files.readme.io/60337b2-usage-graph.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/OeES2aKn6aa0oX355DxgS_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/KTnjGpOt5Jy3R49dj4wOm_image.png) Example ```html

``` ### Cost Table ![](https://files.readme.io/63235d9-cost-table.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/z9_oZj-Ju7Vft8hZj2MsX_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/hluQclUJ0HspjR2Ykbfow_image.png) Example ```html

``` ### Invoice Details ![](https://files.readme.io/bbc7154-invoice-details.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/GIcUPRjoEZJeqPzGrc4fT_image.png) Example ```html

``` ### Invoices List ![](https://files.readme.io/29169e9-invoices-list.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/xVzCLYc_9qM3KDO2_Z5Xk_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/Ww2POYyU9WxYzL0cDwe3j_image.png) Example ```html

``` ### Orders Usage Graph and Table ![](https://files.readme.io/2c9c52c-Screenshot_2024-01-10_at_1.05.51_PM.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/4nafn-tv4u-cKCl8NUGV2_image.png) Example ```html

``` ### Prepaid Summary ![](https://files.readme.io/160bc79-image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/SN61eYlmgr4A-c0DKxd_I_image.png) Example ```html

``` ### Prepaid Wallet ![](https://files.readme.io/dad7af7-prepaid-wallet.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/2eBn5gzfOy2JRpdEgs0wa_image.png) Example ```html

``` ### Stripe Payment Method ![](https://files.readme.io/d9ca44d-Screen_Shot_2023-01-06_at_4.50.00_PM.png) ![](https://files.readme.io/40d4a6c-Screen_Shot_2023-01-06_at_4.50.09_PM.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/U4Vmk5nTxMreGoKzCGUVi_image.png) ```html

``` ### Notes Ensure that the page specified in `data-amberflo-return-url` includes the Amberflo script and properly initializes the SDK, just like the page where the component is originally hosted. This ensures continuity in rendering and functionality when the user is redirected. Add the script: ```html ``` And make sure you instantiate it: ```javascript ``` ### Pricing Plan ![](https://files.readme.io/cd62666-pricing.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/4c9JCf-V1Igy-u4yT0ZOP_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/SARgihTaRTXNw-FXzBXn5_image.png) ```html

``` ### Included Units ![](https://files.readme.io/cdad9cb-screenshot-localhost_3000-2022.12.27-12_37_16.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/xdN_pC86GceRQshpeeNr5_image.png) ### Order List ![](https://files.readme.io/1da89dd-image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/rG7Snu2WlulTcJEB2U2rs_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/PoRAx-64JxxvikCvhWsOQ_image.png) Example: ```html

``` ### Order Details ![](https://files.readme.io/4840691-image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/W8ljm3NPjzvlmp1QQGw7F_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/7tLQMOzwvg4765hPCDeSM_image.png) ```html

``` ### Order Create ![](https://files.readme.io/c2e3e5b-image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/FYMUMWKqPuBN4y7QRqzdk_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/tIRuCtdpbn_sfQSmLfwqe_image.png) ```html

``` ### Order Usage Graph and Table ![](https://files.readme.io/a6fa09f-image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/CSHs3C5xK3RS9uE5XDHkt_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/hUFJzFpqYTYLWzyQyp-3-_image.png) ```html

``` ## How to get the Stripe publishable key - Go to to [stripe.com ](https://stripe.com/)and login with your username and password - Once inside Stripe, go to [Dashboard](https://dashboard.stripe.com/) - Inside the dashboard copy the publishable key. Check the image below for reference: ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/iWqWbUJcO1zMXugEnGB7W_image.png) **Appendix 1: Full Code Example** ```html

```