Embedding Widgets
Step-by-step guide to embedding UPTIQ Business Health widgets in your platform: add the script, insert the tag, size the container, and customize styles
A widget — technically implemented as a Web Component, a standard browser technology — is an independent functional module with a defined set of characteristics and intended functionality. Each widget can be embedded into a digital environment, such as an online banking app, as a standalone element or in combination with other widgets.
Follow these steps to embed a UPTIQ Business Health widget in your environment.
Available Widgets
Each widget has a coded name (used in the script URL, Step 1) and a tag name (used in the HTML tag, Step 2):
| WIDGET | CODED NAME | {tag-name} |
|---|---|---|
| Accounts | accounts | us-accounts |
| Business Valuation | evaluation | us-evaluation |
| Cash Flow Forecast | cashflow | us-cash-flow |
| Credit Score | creditscore | us-credit-score |
| Key Metrics | kpi | us-kpi |
| Payment Calendar | paymentscalendar | us-payment-calendar |
| Carbon Footprint | carbonfootprint | us-carbon-footprint |
| Marketing | marketing | us-marketing |
| eCommerce & Sales | ecommerce | us-ecommerce |
| App Connector | applicationconnector | us-application-connector |
| Insights | insights | us-insights |
| Credit Score Connector | creditscoreconnector | us-creditscore-connector |
Step 1: Add the Widget Script
Add the target widget's script to the <head> of your HTML document:
<script type="module" src="{baseUrl}/api/v1/cdn/{name}"></script>Where:
{baseUrl}– your Business Health tenant URL, supplied by UPTIQ.{name}– the widget's coded name, from the table above.
Step 2: Insert the Widget Tag
Insert the selected widget's tag, with the relevant properties, into the appropriate part of the page:
<{tag-name}
class="widget-container"
api="{baseUrl}"
auth='{"authProps1":"...","authPropsN":"..."}'
></{tag-name}>Where:
{tag-name}– the widget's tag name (with theus-prefix), from the table above.class– CSS class for the container.api– your Business Health tenant (the same{baseUrl}as in Step 1).auth– authorization parameters for Single Sign-On (SSO) authentication. This can be any set of parameters for cross-server integration used to identify the current user (an authentication token, session ID, etc.). See Widget & Dashboard Integration for the full SSO flow this feeds into.
Make sure to use JSON format for the
authproperty, as in the example above.
Additional properties are available to customize the interface and behavior of each widget — see Widget Properties.
Step 3: Configure Container Size
Configure the widget container's size via the widget-container class:
.widget-container {
width: 375px;
height: 620px;
}All widgets are adaptive, adjusting to the styles of the embedding container.
A widget's form factor (horizontal or vertical) is set automatically, based on the container's width:
- Vertical view: width = 375px–519px
- Horizontal view: width ≥ 520px
For either view, the following container heights are the minimum required for the best user experience:
- Vertical view: 620px
- Horizontal view: 480px
It's always recommended to set a static height for each widget container.
Step 4: Customize Styles (Optional)
Customize a widget's style attributes (fonts, colors, borders, padding, shadows, and so on) using CSS variables to override the defaults. See Widget Customization for the full reference.
Below is an example of customizing a few sample parameters — try it to see how it affects the widget's interface:
:root {
--us-font-family: 'Roboto';
--us-widget-container-radius: 10px;
--us-widget-container-boxshadow: 0px 4px 9px 0px rgb(0 0 0 / 12%);
}Cross-Domain Requests
Embedding widgets requires your domain(s) to be whitelisted with Business Health beforehand. Provide UPTIQ with the domain(s) you'll be embedding from as part of your integration setup.
Updated about 3 hours ago