Welcome to the Wingify Knowledge Base! This site is growing. If you can't find what you're looking for, visit help.vwo.com for more resources.

Start Free trial

Articles in this section

Add Widgets in Visual Editor to Create Variations

Jash Unadkat
  • Updated
Share:
Follow
close this to read article

This article covers the following:

Overview

The Visual Editor lets you add new, interactive widgets to your website variations without coding. You can use a library of pre-built widgets to quickly deploy promotional banners, lead-generation forms, social proof elements, and more, and test their impact on your conversion goals.

For example, if you are running a seasonal clearance sale, you can use the Countdown Timer widget to create a sense of urgency. Instead of manually coding a timer, you simply select the widget, style it to match your brand, and set it to trigger as soon as a visitor lands on the page. This allows you to rapidly iterate on promotional strategies and discover what resonates best with your audience.

Let’s understand how you can add widgets to your variation.

Add a Widget to Your Variation

To add widgets to your variation:

  1. Open your campaign in the Visual Editor.
  2. In the Visual Editor, select the variation you wish to modify.
  3. On the left-hand toolbar, click +Add.
  4. Select the Widgets tab to view the widget library.
  5. Select the desired widget template. The widget appears on the page, and the Widget Settings panel opens on the right.
  6. Use the Widget Settings panel to customize the layout, content, and behavior.
  7. Click Done at the bottom of the panel to save your changes. Your widget will be added to your variation.

Supported Widget Types

The Visual Editor provides an extensive library of widgets categorized by their primary function, allowing you to address specific conversion hurdles or engagement goals. You can use the Filters icon in the gallery to browse the following categories:

Engagement

Engagement widgets help you capture visitor attention and guide them toward important information or site sections. You can choose from the following set of Engagement widgets:

  • Banner: A horizontal or vertical bar used for announcements or sitewide alerts.
  • Frame: Highlights specific sections of your site with a stylized border.
  • Image Pop-in: Displays a custom image in a modal window.
  • Spotlight: Dims the rest of the page to focus the visitor's attention on a specific element.
  • Sticky Element: Keeps a specific element visible as the user scrolls.
  • Descriptive Tooltip: Adds helpful context when a visitor hovers over an element.
  • Video Pop-in: Embeds a video (YouTube/Vimeo) within a pop-up.
  • Virtual Click: Tracks clicks on non-clickable elements for data gathering.

Conversion

Conversion widgets are purpose-built to drive visitors toward a specific action or purchase.

  • Action Button: Inserts a customizable CTA button.
  • Countdown Timer: Displays a live clock counting down to a specific time or duration.
  • Drawer: A slide-out panel that can contain forms or additional information.
  • Progress Bar: Visualizes how far a user is in a specific process, such as a checkout flow.
  • Before-After Image: A slider that compares two different images.

Feedback & Social

These widgets leverage social validation and direct user input to improve site credibility and understanding. The Visual Editor allows you to add the following Feedback and Social widgets:

  • Survey: Displays a quick poll or feedback form.
  • Social Share: Adds buttons for users to share your content on social media.
  • Social Proof: Displays recent activity notifications, such as ‘5 people bought this in the last hour.

Graphic Effect

These widgets allow you to add visual flair and dynamic transitions to your variations to make them more aesthetically engaging. There are four templates available:

  • Before-After Image: Displays a slider that compares two versions of an image.
  • Celebrate: Triggers an animated celebration effect (like confetti) to reward user actions.
  • Scratch Card: Simulates a gamified scratch card experience to reveal an offer or discount.
  • Snowflake Animation: Overlays a seasonal animation of falling snowflakes on the page.

Custom Options

For custom requirements, you can build your own widgets from scratch. For more information, refer to Configure Custom Widgets.

Configure Widget Settings

Based on the type of Widget you select, the Widget Settings panel appears on the right. It provides a centralized interface to control every aspect of the widget's appearance and operational logic.

  • Layout: Control the position (Top, Bottom, or Free Placement) and the stack order (Layers) of the widget.
  • Content: Modify the text, images, and links. You can also add secondary buttons or customize the redirection URL.
  • Style: Customize the visual appearance, including font size, colors, background, border radius, and entry/exit animations.
  • Trigger: Define the logic for when the widget should be displayed to the user.

Configure Widget Triggers

Once you have designed your widget, the next critical step is to set up the precise trigger conditions. Triggers determine the exact moment and frequency with which a widget becomes visible to your visitors, ensuring the element appears only when it is most relevant.

Trigger Conditions

Defining the right trigger condition is essential for aligning the widget's appearance with the visitor's current intent on the page. Select from the following trigger conditions for your widget based on your requirement:

  • When the page is loaded: The widget appears as soon as the Wingify script executes on the page.
  • As soon as possible: Similar to page load, but optimized to show at the earliest technical opportunity.
  • Visitor scrolls the page: Triggered when the visitor reaches a certain percentage of page depth or a specific pixel value.
  • At click on an element: The widget appears only after a visitor clicks a specific CSS selector on your page.
  • When an element is visible: Displays the widget when a specific part of your webpage enters the visitor's viewport.
  • Hovering: Triggered when a visitor moves their cursor over a specific element.
  • At exit intent: The widget displays when the system detects the user's cursor moving toward the browser's close or back buttons (available on desktop).

Frequency and Behavior

Managing how often a widget appears and how it disappears prevents user fatigue and maintains a clean browsing experience.

  • Trigger when: Choose between showing the widget Immediately or After a X seconds delay.
  • Frequency: Control how often the widget is shown (for example, Every time, Once per session, or Every X days).
  • Auto-hide: Set the widget to automatically disappear after a specified duration of time.
  • When is the widget dismissed: Define the dismissal logic, such as ‘If the visitor clicks the cross button’ or ‘If the visitor clicks anywhere outside the widget’.

Need more help?

For more information or further assistance, contact Wingify Support.

Was this article helpful?

Return to top

Related articles