The Widget Editor empowers operators to craft new widgets or replicate existing ones. This feature is purpose-built to grant our customers the autonomy to create their own customized widgets. dop widget designs that align with their design guideline

This documentation page cover the following topics:

1. 1. How to create new widget

   2. How do duplicate existing widget

   3. Widget Detail Interface - Info Tab

   4. Widget Detail Interface - Designer Tab

1. Log in to the CI app at https://ci.zapyan.com.

2. Choose the business for which you want to create a new widget by clicking on 'View Dashboard.'

3. Go to the widget overview by selecting 'Explorer' -> 'Widget' (https://ci.zapyan.com/explorer/widget).

4. Click on the 'New Widget' button located in the top right corner of the screen.

5. Complete all the required information in the 'Widget,' 'Configuration,' 'Variables' and 'Code' tabs available within the 'Designer' view.

6. Finally, click the 'Save' button to save your new widget.

Note: 

• When creating the new widget, please follow the best practices: https://ci.doc.zapyan.com/user-guide/explorer-overview/widget/custom-widget-best-practices

• Operators can include the personalized fields e.g. product lable, price and other product attributes into their widget. to find out available personalized fields and how to included them in your custom widget, please click here: https://ci.doc.zapyan.com/user-guide/explorer-overview/widget/custom-widget-best-practices#h.5r9x8mdt03nd

1. Log in to ci app https://ci.zapyan.com

2. Select business for which you like to create new widget by clicking on View Dashboard

3. Navigate to the widget overview by clicking on Explorer -> Widget (https://ci.zapyan.com/explorer/widget)

4. Click on the Action button next to the widget you like to duplicate

5. Click on Duplicate button

6. Update the configurations in the Designer view

7. Click on Save.

The widget detail page is meticulously crafted to provide users with a comprehensive overview of both public and custom widgets. This page serves as a valuable resource for users seeking a deeper understanding of the widget's design and its integration with various campaigns. The detail page is thoughtfully divided into four sections:

• Header: This section prominently displays essential information including the widget's label, status, and a concise short description.

• Description: Here, users will find an in-depth definition of the widget's design. Additionally, best practices for effectively utilizing this design are provided, along with convenient previews for both mobile and desktop displays.

• Used in Campaigns: The final section is dedicated to showcasing all campaigns currently utilizing this specific widget. Users can effortlessly access the campaign configurations by simply clicking on the associated campaign label.

This structured approach ensures that users can easily access the information they need to optimize their widget usage and campaign management.