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,' 'Configuration,' 'Variables' and 'Code' tabs available within the 'Designer' view.
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
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.
Configuration: The configuration tab is designed to display the variable which are defined in the Variable Tab. In this section, operators can update the general attributes, text fields, styling and layout of the custom widget. users also have the ability to chose which configuration variable should be displayed within the campaign configuration flow
Variable: This tab is designed for operators to create their own custom attributes which can be used within the html to display specific configuration. example for such configuration include widget title, font type, font color, activate compare price etc.
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.
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