Widget Component

6min

In the generic-widget.json, you configure the widget library for your project. Each library can contain one or multiple widgets. If no generic-widget.json is present on your project, you can simply add one. Don't forget to register it in your urls.json.
Structure
Widget Library
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
Widget Element
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
Resource
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. 
﻿
Definition of placements for widgets
The widget component can be configured in any view in the views.json.
﻿
Field
Description
name*
Specify library name
widgetId*
Specify the ID for the widget from the library.
bidirectionalRouter
Bidirectional feature parameter for the widget: When activated, this feature facilitates bidirectional routing communication between the Experience and the widget. 
* = required field

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.

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.

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

Field	Description
name*	Specify library name
widgetId*	Specify the ID for the widget from the library.
bidirectionalRouter	Bidirectional feature parameter for the widget: When activated, this feature facilitates bidirectional routing communication between the Experience and the widget.

Updated 18 Dec 2024

Did this page help you?

Image Scaling

Example for widget definition