Configure Custom Widgets in Visual Editor

This article covers the following

• Overview
• Create a Custom Widget
• Configure Widget Properties
• Use Custom Widgets

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.

1. Define Code/Markup:
   • HTML: Enter the structural code for your widget.
   • Styles: Add CSS to define the look and feel, ensuring it matches your website's styling.
   • JavaScript: Input any functional logic required for the widget to perform actions.
2. Set up Configurations:
   • Click the Configurations tab.
   • Click + Insert setting to add input fields that users will see when they use the widget in the editor.
   • Select from options such as Input Box, Color Picker, Checkbox, or Slider. This allows non-technical users to customize the widget (for example, changing text or button colors) without touching the code.
3. Click Create to save your widget to the library.

Use Custom Widgets

After creation, your widget appears in the Custom Widgets section of the Add menu.

1. Navigate to the Add > Widgets menu in the Visual Editor.
2. Under Custom Widgets, select the widget you created.
3. Select the desired location on your webpage.
4. Use the Edit panel on the right to configure the custom settings you defined during the configuration step, such as entering text or adjusting values with the sliders.

Need more help?

For further assistance or more information, contact Wingify Support.