Usage and Billing Portal
UI SDK - Vanilla Javascript integration
38min
sdk library integration 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 a ui kit wrapper, using the react ui kit behind the scenes this sdk will internally use react js, but does not require the customer to have a react project the sdk is responsible of 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 📘 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 section 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 it's also possible to customize the components by adding a specific color, choose to show the widget container and its title, the font size, font family, and even a custom font to do that, use the following attributes data amberflo colors set a hex code or string value of the primary color of your brand we will automatically create a palette based on that color for all the components by default it will use amberflo colors data amberflo font size enter a number, this is the base font size, since not all part of this view has the same font size, all internal components will calculate the percentage to show the desired font size for each internal view default value is 16, which is the default font size for all amberflo components data amberflo font family this is a comma separated name of fonts, it can be any font that is already supported and imported on your site the browser will try to use the first font on that list, but if for some reason the font is not available, it will fall back to the right until a font is available this is not common, but it could happen so we recommend having more than one font in the list data amberflo font custom if the font you are trying to use is not supported by the browser, nor one already added by you, you could use this prop to import a custom google font to your app besides importing the font, you need to specify the font name on the attributedata amberflo font family data amberflo with container it receives a string saying "true" or "false", if true, it will show the container around the widget, similar to the ones on our app data amberflo with title it receives a string saying "true" or "false", if true, it will show the title of the widget, it requires that the container is visible data amberflo title it receives a string specifying a custom title for the widget, if not provided, will use the widget default title all the styles attributes above are optional, if none is provided, it will use amberflo design system some views may require to use of 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 create a session docid 8wrigrkizlweihh9zldvd 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 look through the ui sdk vanilla javascript integration docid\ ija zqfgfvhil daekg6u , you will notice some views have available events (e g on the usage table view, there is a datechange event which will fire when you change the date in the date picker) this gives you the ability to do additional things after an event has fired within the view here is an example of how to use an event using the datechange event with the usage table view invoice related options there are a few views that display invoice related data (i e invoices list and invoice details) there are invoice related settings a user can update at amberflo | settings | invoice https //ui amberflo io/settings/invoice which affect how invoices are displayed through in these views the current available option/settings are displaying cached invoices invoice data displayed will either be cached data or real time data cached data is used to speed up how quickly invoice data can be retrieved group product items on invoices we list all product items and allow user to create categories to group on the invoices 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 make sure that the data amberflo return url page, includes the amberflo script, and also is instantiated, the as you did for the page where this component is hosted 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