Building a Purple Experience
...
Components
Widget Component
Example for widget definition
8min
ideally, prepare a list of third party html resources, you want to set up as widgets, including stylesheets and scripts in builder, navigate to default/storefront/assets via 'actions', create a new file create a "generic widget json", and once its created add the initial array to the file, with adding "\[]" close and re open the editor it now should look like this next to 'name' type the widget library name you may use this to structure multiple widgets of different distributors we use 'demo' as an example to now add widgets to the library demo library, click on the properties icon 10\ name your widget and confirm via clicking the plus icon 11\ next to 'html' insert or type the html of the widget we used "\<div id="demo widget 1" class=“demo widget">" as an example 12\ below 'resources' click on the plus icon 13\ click on the properties icon 14\ check the boxes next to all your needed resources when done, click on the properties icon again 15\ next to 'url' type the url of the resource we used " https //demo min js https //demo min js " as an example 16\ next to 'placement', choose whether to put your widget in the head or the body 17\ next to position, select the position of the resource 18\ next to 'properties', click on the properties icons we added here only an empty async 20\ on the bottom of the resources section, click on the plus symbol to add the global resources repeat steps from 13 17 to create global resources 21\ you can add another widget library by clicking on the plus symbol 22\ after configuring your first generic widget, you need to tell the application about it's existence to do that, open your urls json, which is located in same folder you can add the genericwidget property simply by clicking the property button on the top right of the urls json pane 23\ now add the path accordingly example 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