Web Component Properties
The table below lists all required and optional properties for Web Component configuration, which should be used in Step 2 of Component integration (as described in How to Integrate Web Components). Different properties may be applicable to different types of Components.
General Component Properties
| PROPERTY | TYPE | DESCRIPTION | REQUIRED |
|---|---|---|---|
| api | string | Host of the deployed upSWOT web application. | Yes |
| auth | object | Authorization parameters such as a list of any parameters for cross-server integration to get the data on the current client (SessionId, Email, etc.). Upon receiving the authorization parameters, the Component sends all the necessary requests and performs the authorization. The auth and token properties are mutually exclusive. | Yes (If authorization is performed by the Component) |
| token | string | JWT token for authorization. Upon receiving the JWT directly from the banking app, the Component performs authorization without any additional requests. The token and auth properties are mutually exclusive. | Yes (If authorization is performed by an external app and a token is passed to the Component) |
| isDarkTheme | boolean | If True, the dark theme is enabled, and the app logos are adjusted accordingly. If False, the dark theme is disabled, and the regular app logos are used. | No |
| locale | string | Localization of the Component’s user interface. | No |
Business Component Properties (optional)
| PROPERTY | TYPE | DESCRIPTION |
|---|---|---|
| showHeaderIcon | boolean | If True, the icon in the Component's header is shown. If False (default), the icon in the Component's header is hidden. |
| name | string | Text in the Component's header. If empty (default), the default name of the Component is displayed. |
| hideRefreshDate | boolean | If True, the data refresh status in the Component’s header is hidden. If False (default), the data refresh status in the Component’s header is displayed. |
| disableapps | boolean | If True, all the buttons that lead to the App Connector are hidden. If False (default), all the buttons that lead to the App Connector are displayed. |
| readonly | boolean | If True, the Component is displayed in read-only mode. If False (default), the read-only mode is disabled. |
| demo | boolean | If True, the demo mode is enabled, populating the Component with mock data in read-only mode. If False (default), the demo mode is disabled. |
| introtext | array of objects [{"title": string, "text": string, "image": string}] | Customizes the title and text on each intro screen. For example: [{"title": "Title 1", "text": "Text 1", "image": "Image 1"}, {"title": "Title 2", "text": "Text 2"}, "image": "Image 2"] |
| introctatext | string | Customizes the call-to-action (CTA) label of the Intro screens' button. |
App Connector and Credit Score Connector Properties (optional)
| PROPERTY | TYPE | DESCRIPTION |
|---|---|---|
| titleText | string | Brief text at the top of the App Connector. If empty (default), Title is not displayed. In Credit Score Connector - sets the Search Screen title. |
| subtitleText | string | Additional text below the title. In Credit Score Connector - sets the Search Screen title. If empty (default), Subtitle is not displayed). |
| hideInvite (App Connector) | boolean | If True, the Invite button is hidden from the app tiles. If False (default), the Invite button is displayed on the app tiles, allowing to share the app connection link. |
| hideSearchBar (App Connector) | boolean | If True, the Search bar at the top of the App Connector is hidden. If False (default), the Search bar at the top of the App Connector is displayed, allowing filtering of apps by app title. |
| hideFilter (App Connector) | boolean | If True, the Filter button bar at the top of the App Connector is hidden. If False (default), the Filter button bar at the top of the App Connector is displayed, allowing filtering of apps by category. |
| poolInstanceId (App Connector) | uuid | ID of the pool of apps that are available in the App Connector. If empty (default), the default pool configured in the Admin Panel is used. |
| filterParams | object {"categoriesIds": [uuid], "servicesIds": [uuid]} | IDs of specific app categories (categoriesIds) and/or apps (servicesIds) to be displayed in the App Connector. Either array is optional and may be omitted; if both arrays are specified, the App Connector will only display the apps that match both the servicesIds and categoriesIds criteria. |
| hideSecurityBlock | boolean | Hide the footer with security information. False by default. |
| application (App Connector) | object | The Application object stores the company data: { "companyName": "Test Company", "email": "[email protected] ", "applicationNumber": "234234234324", "countryAlpha2Code": "US", "userExternalId": "1234567890123", "companyExternalId": "1234567890123123", "username": "testusername123" } |
| showBackButtonFromAppConnector (Credit Score Connector) | boolean | If True, the Back button is displayed in the footer of the App Connector. If False (default), the Back button in the footer of the App Connector is hidden. |
| hideAppConnectionStep (Credit Score Connector) | boolean | Hide app connector step. True by default. |
| isAppConnectionRequired (Credit Score Connector) | boolean | Disables the "Get Score" button in the app connector step if there is no app connected (means in default pool, the same list in dashboard v3, apps section with status loading and higher) to the account except CORE DATA. True by default. |
| excludedServicesIds | string | This property excludes specific services from the service category of the integrations pool to display only those currently available for connecting. A serviceId parameter specifies which service to exclude, and categoryId specifies the service category from which to exclude defined services. |
| creditBureauId | string | New external property that defines what credit bureau should be used in search and connect process inside credit score connector. By default, CreditSafe. |
Insights Component Properties (optional)
| PROPERTY | TYPE | DESCRIPTION |
|---|---|---|
| showHeaderIcon | boolean | If True, the icon in the Component's header is shown. If False (default), the icon in the Component's header is hidden. |
| name | string | Text in the Component's header. If empty (default), the default name of the Component is displayed. |
| readonly | boolean | If True, the Component is displayed in read-only mode. If False (default), the read-only mode is disabled. |
| demo | boolean | If True, the demo mode is enabled, populating the Component with mock data in read-only mode. If False (default), the demo mode is disabled. |
| componentIds | array of uuid | An array of component IDs for which the insights should be displayed in the list. By default, it is an empty array, and insights from all components are displayed. Component IDs: Accounts: 22e2ec5f-ea14-4cbe-a5bc-1be7df4130a1 Business Valuation: 3a648cb7-55ab-4448-aab1-2403f517538d Carbon Footprint: 587f0167-ffa2-44b1-b031-a70cda99ef8f Cash Flow Forecast: 489b61aa-ef28-11ed-86b4-0242ac1e0029 Credit Score: 73f0158c-12c3-4927-b2ad-d79fe91b7473 eCommerce & Sales: 8ad43e89-7c9f-11ee-a77f-0242ac120005 Key Metrics: 4e36abee-33a7-4256-a500-fc6baa11e9a1 Marketing:10b6fd42-5198-4730-8c76-4531e8879875 Payment Calendar: 43d765e4-397e-4117-ac35-587547b1c38c |
Event Handler
To sustain certain background operations, upSWOT components use JavaScript frontend events. These events allow you to build custom user flows based on user interactions with the Web Components. Moreover, they trigger background processes and do not affect the user's flexibility to continue interacting with the product.
Events and Components where they are used
| Event name | Event data | Trigger | Web Component |
|---|---|---|---|
| invalidtoken | data: Axios Error | After pressing the Try Again button on the error screen when the token had expired. | All components |
| handleBack | - | After the Back button was pressed | App Connector |
| handleNext | - | After the Next button was pressed | App Connector |
| startProcessing | data: { bureauId: string; companyId: string; } | After calling the API method /api/v1/wc/credit-score/start-processing | Credit Score Connector |
| handleBack | - | After the Back button was pressed | Credit Score Connector |
| surveySubmitted | - | Indicate that the user has submitted the Create Your Company survey form | Credit Score Connector |
Updated 6 months ago