Configure Custom Widgets in Visual Editor

Attention: You are viewing documentation for Visual Editor Next. If you are looking for Visual Editor documentation, click here.

#Overview

Wingify's built-in widget library provides a strong starting point for enhancing conversions, but unique design requirements and business objectives often demand more tailored solutions. Custom widgets address this need directly.

Creating custom widgets lets you build proprietary UI components from scratch and deploy them in your experimentation and personalization campaigns. Use them to align with your brand's design, capture specific user interactions, or deliver experiences precisely suited to your audience.

For example, a SaaS company might want to add a custom Pricing Comparison widget that pulls live data from their API. Instead of manually coding this change into every variation, a developer can build a reusable custom widget template. This allows marketing teams to deploy the interactive comparison tool across multiple campaigns simply by dragging and dropping the widget and filling in the required fields in the visual editor.

#Create a Custom Widget

Follow these steps to build a new custom widget from scratch within the Wingify interface:

1. Open your campaign in the Visual Editor.
2. On the left-hand menu, click the Add icon and select Widgets.
3. In the Widgets panel, click Start building under the Custom Widgets section.
4. In the Create widget dialog, enter a Name for your widget (for example, EMI Calculator).
5. Select a Category from the dropdown menu, such as Engagement, Conversion, or Social, to help categorize your widget in the widget library.
6. [Optional] Click + Add description to provide details on the widget's intended use or limitations.

#Configure Widget Properties

Once the basic details are set, you must define the technical structure and the user-facing settings of the widget. A widget consists of four sections:

• HTML
  Enter the HTML markup that defines the structure and content of the widget.

• Styles
  Enter the CSS code used to control the appearance and styling of the widget.

• JavaScript
  Enter the JavaScript code that injects, renders, and controls the widget behavior on the page.

• Configuration
  Define the settings that users can modify from the Visual Editor without editing the underlying code.

  The Configuration section creates a dedicated form that appears whenever a user adds the widget to a campaign. Users can update widget parameters directly through this form, making the widget easier to customize and reuse.

Configuration Properties
Each configuration field is defined as an object with the following properties:

Tip: Click + Insert Setting to view all available configuration components and insert the required component with the correct syntax. After insertion, update the property names and default values to match your widget requirements.

#Developer Notes

1. In the HTML and STYLES sections, variables can be used anywhere with the following syntax: {{propName}}. The code is automatically parsed and detected variables are replaced dynamically. In the JavaScript section, these variables are available through the DATA object, which can be accessed directly in your code.
2. When the widget is rendered:
   1. CSS is injected into a dedicated