Configure a generic widget

Purple Experience

Summary

This article will guide you through the process of configuring a generic widget in the Purple Experience. The configuration is stored in a dynamic resource file called "generic-widget.json," and we'll leverage the Experience builder to carry out the configuration steps.

Preconditions

• Have a list of the third-party HTML resources, including stylesheets and scripts.
• Have decided how and where to integrate the third-party HTML resources into your Purple Experience

How to

1.Go to Purple Experience builder, access your app and enter the dynamic resource under default/storefront/assets.

2. Click on 'Actions'

3. Click on 'Create File'

4. Type 'generic-widget.json'

5. Click on 'Create generic-widget.json'

6. Open the 'generic-widget.json' file then Type '[]'

7. Click on the plus symbol

8. Next to 'name' type the Widget Library name. We used 'demo' as an example

9. To define the widget of the Demo Library, click on the Properties icon

10. Next to 'resources' type the name of the first widget then click on the Plus icon. We used 'demoWidget' as an example.

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" 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

19. Add the script of your property and click on the plus symbol. 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 urs.json pane.

23. Now add the path accordingly.