UI SDK - Vanilla Javascript integration
37 min
sdk library integration the amberflo ui kit sdk is a development kit built with vanilla javascript, designed to let you embed core amberflo views for a specific customer directly on your own website while the sdk uses react behind the scenes, it does not require your project to be built with react it wraps the react ui kit and handles everything internally the sdk is responsible for making the necessary api calls and rendering the components into a specified \<div> 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 \<head> of your site 📘 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 📘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\ ekbenspql oqjpv75b ia 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 \<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 further personalize each component by adding attributes to the \<div> 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 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 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 you can also get the customerid from amberflo site inside customers → click on one customer → copy customer id 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 }) using an event as you explore the available views docid\ lsbcvusmrszh9fpoazrrv , 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 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 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 usage graph example cost table example invoice details example invoices list example orders usage graph and table example prepaid summary example prepaid wallet example stripe payment method 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 and make sure you instantiate it \<script> window\ onload = () => { amberflo = new amberflosdk("{{your session token}}"); }; \</script> pricing plan included units order list example order details order create order usage graph and table 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 appendix 1 full code example
