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,' 'Default Value,' and 'Code' tabs available within the 'Designer' view.

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

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.

The widget detail page, also known as the Designer page, empowers users with the capability to modify the widget's configuration. This feature enables users to preview the HTML widget and make adjustments to both metadata and the HTML code used in the widget's development. Within this view, users will find three essential sub-pages:

• Widget: In this section, users can input specific details related to the widget. This includes the widget's name, a brief and comprehensive description, and an extended description if necessary.

• Default Values: This section contains configurations typically established during the initial design phase of the campaign configuration workflow. It encompasses settings such as the number of products to display within the recommendation block, the call-to-action text, the block title for the recommendation section, and the position of the recommendation on the destination page.

• Code: Here, users gain direct access to the raw HTML code. This allows operators to update the code, which subsequently reflects in the live preview. It's important to note that the HTML code incorporates embedded liquid for personalization, both within the live preview and on the website.

This intuitive and organized interface ensures that users can efficiently manage and customize their widgets to align perfectly with their campaign objectives.