Widget Editor
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:
How to create new widget
How do duplicate existing widget
Widget Detail Interface - Info Tab
Widget Detail Interface - Designer Tab
How to create new widget
Log in to the CI app at https://ci.zapyan.com.
Choose the business for which you want to create a new widget by clicking on 'View Dashboard.'
Go to the widget overview by selecting 'Explorer' -> 'Widget' (https://ci.zapyan.com/explorer/widget).
Click on the 'New Widget' button located in the top right corner of the screen.
Complete all the required information in the 'Widget,' 'Default Value,' and 'Code' tabs available within the 'Designer' view.
Finally, click the 'Save' button to save your new widget.
How to duplicate existing widget
Log in to ci app https://ci.zapyan.com
Select business for which you like to create new widget by clicking on View Dashboard
Navigate to the widget overview by clicking on Explorer -> Widget (https://ci.zapyan.com/explorer/widget)
Click on the Action button next to the widget you like to duplicate
Click on Duplicate button
Update the configurations in the Designer view
Click on Save.
Widget Detail Interface - Info Tab
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.
Widget Detail Interface - Designer Tab
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.
Tips
Widget Limit: A maximum of five widgets can be displayed on a single page, ensuring an organized and streamlined user experience.
Custom Widget Development: Should you require a bespoke widget design tailored to your unique needs, our team of expert professionals offers development services. Feel free to reach out to us for the creation of a new widget that perfectly aligns with your objectives and brand identity.
Still need help?
Please contact our professional support team if you require further assistance