Generic Widget
Purple Experience
The Purple Experience employs a range of implemented components (such as issue, list, etc.) to assist users in effortlessly constructing the application by configuring these components in the dynamic resources. However, there are instances when it becomes necessary to directly incorporate entire widgets from third-party sources onto the page. In such cases, the integration of these widgets is only achievable through the utilization of the Experience Widget Component.
Learn how to Configure a generic widget.
In the Generic-widget.json, you configure the widget library for your project. Each library can contain one or multiple widgets.
The widget library contains the list of widgets from the same 3rd party provider (for example the brochure provider 'weekli')
Field | Description |
name* | Specifies the name of the widget library |
Widgets* | Specifies a list of widgets to be utilized in the Experience. |
Resources | Specifies a list of global resources. These resources are loaded whenever any widget from the same library is loaded in the view. |
* = required field
Field | Description |
html* | Specifies the name of the widget library |
Resources* | Specifies a list of resources that are loaded exclusively when their corresponding widget is loaded within the view. |
* = required field
Field | Description |
type* | It can either be a script or a style. |
url | The URL of the resource |
content | The content of the HTML element |
placement | It can be placed either in the body or the head of the HTML page. The placement won't make a difference if the position value is just_before_element/just_after_element |
position | It can be positioned either at the top or the bottom of the placement (body/head), as well as before (just_before_element) or after (just_after_element) the widget's HTML. |
properties | all properties that we can find in the HTML element |
* = required field
The configuration is based on the widget config provided by the 3rd party provider.
This is a widget from 'weekli' to be integrated. It contains an html div tag with a script. The script should be loaded after the html div tag.
The configuration within the "generic-widget.json" should resemble:
