Part of adding the Usage Tiers feature was also allowing you to expose the call and usage data to your customers. To facilitate that we allow you to create and embed widgets into your applications or websites.
When you select a customer there is a USAGE WIDGET button beside that users name. The button being positioned for a customer will help you create a widget for any customer, but it helps to build them whilst looking at one.
You can configure and see the embedding instruction from the page this button opens:
You can control size, theme, and turn off different data elements like, tier, replenishment, and even a call grid where the user will see their call details since the last refresh; something we heard from our customers who said “where did I use all of my call allocation?”
How to Integrate:
We give you all of the code. Its a simple 4 step process. You need to call our public API from your backend code to get a short lived token and URL to protect your customers. These urls expire in an hour (although they have refresh logic, so the user will keep seeing updates for 24 hours).
1) Implement the server-side token endpoint from the “Get Token” tab,
2) Call your endpoint to get a JWT token,
3) Build the widget URL with the token,
4) Embed in an iframe. The token shown here is for testing only – you must generate tokens dynamically on your server in production.
Security & Tokens: JWT tokens expire in 1 hour and are scoped to specific customers. Your API key must never be exposed to client-side code – always generate tokens server-side using the endpoint pattern shown in the “Get Token” tab.
Widget Configuration: Default dimensions are 800×600px (adjustable above). The widget auto-refreshes usage data every minute and uses Material-UI components that respect your theme settings.
Important: URL-encode customer IDs containing special characters (like email addresses) and ensure your server can handle the token generation endpoint before going live.
We’ll obviously be adding a heap of layout controls to these widgets, and would love to work with you if you have difficulties getting these widgets into your code.
Team LLMASAService
Leave a Reply