Web Components Integration Guide
How to Integrate Web Components
A Web Component, or widget, is an independent functional module with a defined set of unique characteristics and intended functionality. Each Web Component can be easily integrated into a digital environment, such as an online banking app, as a standalone widget, or in combination with other components.
Follow these steps to integrate the upSWOT widget into your environment correctly
Step 1. Add the target Component script to the head of your HTML Document:
<script type="module" src="https://{admin host}/api/v1/cdn/{name}"></script>
Where:
{admin host}
– Host name of the Admin Panel.
{name}
– Name of the Component.
Available Web Components and their encoded names
WEB COMPONENT | CODED NAME |
---|---|
Accounts | accounts |
Business Valuation | evaluation |
Cash Flow Forecast | cashflow |
Credit Score | creditscore |
Key Metrics | kpi |
Payment Calendar | paymentscalendar |
Carbon Footprint | carbonfootprint |
Marketing | marketing |
eCommerce & Sales | ecommerce |
App Connector | applicationconnector |
Insights | insights |
Credit Score Connector | creditscoreconnector |
Step 2. Insert the selected Component script with the relevant properties into the appropriate part of the page.
<{tag-name}
class="widget-container"
api="https://{upSWOT admin host}"
auth='{"authProps1":"...","authPropsN":"..."}'
></{tag-name}>
Where:
{tag-name}
– Name of the Component with the prefix "us".
class
– CSS class for the container.
api
– Host of the deployed upSWOT web application.
auth
– Authorization parameters for Single Sign-on (SSO) authentication. It can be a list of any parameters for cross-server integration to get data on the current client (authentication token, session ID, etc.). For more details, see Web Components SSO Guide.
Please make sure to use the JSON format for the auth property, as in the example above.
Additional properties may be used to customize the interface and behavior of the Component (see Component Properties).
Available {tag-name}
values for each Web Component
WEB COMPONENT | {tag-name} |
---|---|
Accounts | us-accounts |
Business Valuation | us-evaluation |
Cash Flow Forecast | us-cash-flow |
Credit Score | us-credit-score |
Key Metrics | us-kpi |
Payment Calendar | us-payment-calendar |
Carbon Footprint | us-carbon-footprint |
Marketing | us-marketing |
eCommerce & Sales | us-ecommerce |
App Connector | us-application-connector |
Insights | us-insights |
Credit Score Connector | us-creditscore-connector |
Step 3. Configure widget container size (widget-container class)
.widget-container {
width: 375px;
height: 620px;
}
All Web Components are adaptive, adjusting to the styles of the embedded container.
The 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 any view type, the following container height parameters are the minimum required for the best user experience:
- Vertical view: 620px
- Horizontal view: 480px
It is always recommended to set a static height for each widget container.
Step 4 (Optional). Customize the Web Component’s style attributes (eg, fonts, colors, borders, padding, shadows, etc.) by using CSS variables to override the default style. For more details, see Design System Specs.
Below is an example of how to customize sample parameters. Try it to observe 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
The Web Component allows for cross-domain requests from the provider’s front end to the upSWOT domain if the upSWOT application back end was deployed in a different domain.
To enable cross-domain requests, the provider should supply upSWOT with a list of domains from which the requests will be received.
Updated 4 months ago