Start Free trial

Articles in this section

See more →

Working With Widgets in VWO

Vaibhav Singh
  • Updated
Share:
Follow
close this to read article

In this article, you’ll learn:

What are Widgets in VWO?

Widgets in VWO allow you to add Banners and Pop-ups with images and forms on your website without code. You can create variations of your webpage with these widgets directly from the VWO Visual Editor. This feature is only available in the VWO Enterprise plan. 

Consider a situation wherein you want to promote an ongoing sale on your website; you can use a Promotion Bar that sticks on your webpage even if the user scrolls on it. This is a sure-shot way of getting your visitor’s attention.

You can also combine Widgets with various targeting options to make it more contextual. Say you want to show a newsletter subscription pop-up when a visitor reaches the end of the article; you can use Behavior targeting to identify the visitors and create the experience using Widgets, all of it without writing a single line of code. 

Widgets are a great mechanism to engage a visitor on your website by advertising new and exciting content, promoting an upcoming event, enhancing the discoverability of some prime features of your application, or collecting more signups for your next event or newsletter.

The relevance of each piece of information you display on your website increases, and conversions rise.

Types of Widgets in VWO

The VWO Widgets are broadly classified into the following two categories:

      1. Banners

        A banner is an excellent way of highlighting something on your website. Banners can inform, promote a new product, increase brand awareness, and be used for many different scenarios.
        The Banner Widget in VWO enables you to add a customizable ribbon-like component at the top or bottom of your website. 

        You can modify your message and the Call to action button to match your use case. You can also introduce more components, such as an input field, to enable email signups in this banner. This is how a VWO banner looks on the webpage.


      2. Modals

        Modals are popup windows that appear over the contents of the webpage and can be used in various scenarios. If a visitor is trying to leave your website, you can use a modal to capture their attention.

        There are four different modals available in VWO- Image pop-up, Form pop-up, Subscription pop-up (Vertical), and Subscription pop-up (Horizontal). Each of them can be used in three different layouts. You can have a full-screen modal, a modal without any overlay, or go with our default option - a modal with an overlay. 
        NOTE: To learn about adding a form using widgets, refer to Working with Forms in VWO.

        Using the Modal Widget, you can:

          • Add an Image pop-up and trigger it based on visitor behaviour on the webpage
          • Use a Form pop-up to promote and collect signups for an upcoming event
          • Trigger a form when the user intends to sign up for your newsletter
          • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO


                                                 This is what a form pop-up looks like.

      3. Side Chicklet

        Want to engage with your website visitors without obstructing their usual website experience? Side Chicklet is the answer. 

        Side Chicklets are the little rectangular elements you can add on your web page’s left or right to catch visitors’ interest readily. For example, consider an e-commerce website that wishes to inform its website visitors about some policy-related changes. Here, you can add a side-chiclet widget with a crisp message, “Our return policy has changed,” and as soon the visitors click on this chicklet, they are redirected to the policy page. This way, you can announce without covering a significant portion of your webpage.

        NOTE: We recommend that you create multiple variations of chicklet content or even experiment with announcement banners to see which works best for you.

        Let’s understand the usage of chicklets with a real-life example of Wingify.com. Team Wingify has added a chicklet on its homepage to announce the current job openings. The chicklet says, “We’re hiring”, right on the home page, and clicking on it takes the visitor directly to the Careers page, where they can look at the list of current openings.

        While adding the Side Chicklet Widget on your webpage using VWO Editor, you can:

          • Change its placement on the page (left or right)
          • Select between making it scroll with the page or keeping its position fixed as the visitor scrolls
          • Redirect the user to a webpage or a particular section
          • Configure the text and background color
          • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

      4. Video Embed

        Adding videos on your website can result in higher click-through rates, average order value, conversion, and revenue. Videos enable you to quickly deliver a message and keep the visitors on your website engaged longer. Not just this, videos are also crucial for your search engine optimization (SEO).

        It is a proven fact that viewers will stay engaged longer with video than with reading and are more likely to convert to leads after viewing a video. This is because video allows you to communicate with anything in the most effective way.

        VWO supports two video types- YouTube and Vimeo. Using the YouTube video widget, you can add videos hosted on YouTube, while with the Vimeo widget, you can add videos hosted on Vimeo. 

        Using the video widget of VWO Editor, you can easily embed videos anywhere on your webpage without writing a single line of code. All you need to have is the URL where your video is on Youtube/Vimeo.


        While adding a video widget on your webpage using the VWO Editor, you can:

              • Configure the placement of video
              • Autoplay video on page load
              • Remove video controls
              • Make the video run continuously on a loop
              • Mute audio
              • Make video non-interactive
              • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO
        NOTE: The primary video configurations, such as disabling the video controls, are subject to the limitations stipulated by the service provider (YouTube or Vimeo) based on your plan and pricing model.
        INFO: Besides YouTube and Vimeo widgets, you can also add videos using the Video Embed section in VWO Gallery > Basic elements.  To know more about that, refer to Adding Elements on your Webpage Using VWO Editor. 

      5. Tooltips 

        Wish to provide additional information about any field on the UI without making it look cluttered? Add a tooltip that shows up when the visitor interacts with the element. Tooltips are a great way to convey information to the visitor instead of having it right on the page itself. 

        Tooltips are the contextual labels that appear when the user hovers over, focuses on or touches an element. It typically contains help text about its function. For example, a tooltip on the password field could hold information about the mandatory characters to form a password. 

        NOTE: While adding Tooltips on your web pages using VWO, you can add textual and media content.

        Have a look at the tooltip shown in the image below. It typically informs you about what information should go into the field.

        While adding a tooltip widget on your webpage using the VWO Editor, you can:

            • Configure its placement on the page relative to the element
            • Add content  Such as text, images, and call to actions
            • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

      6. Scroll to Top

        At times, some pages on your website have a lot of content, for example, blogging websites wherein the visitor needs to scroll deeper to traverse the content. Furthermore, this scrolling could extend if your webpage is being accessed on mobile devices.

        Consider the visitor has scrolled to the bottom of the page and wishes to go back to the top. For this, they need to scroll up to the top manually. This may even lead to visitors leaving your website.

        To cater to this, VWO comes with the Scroll to Top widget. It is typically a button that enables your visitors to quickly return to the top of the page with a single click. This brings a better user experience to your website.

        Using the Scroll to Top widget of VWO Editor, you can easily add a Scroll to Top button on your webpage without writing a single line of code. Once inserted, a sticky button appears in the bottom right corner of the page whenever your visitor starts scrolling down. It works seamlessly for desktop, tablet, and mobile versions of your webpage.

        While adding the Scroll to Top button on your webpage using VWO Editor, you can:

            • Change it background shape- circle, rectangle, or rounded rectangle
            • Change the color of the arrow that appears on the button
            • Change the color of the button
            • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

      7. Countdown Timer

        The Countdown Timer is a live ticking counter that shows a time duration as it runs down. You can use it to create a sense of urgency or create hype around an event that is yet to start or end.

        For example, adding a Countdown Timer on the homepage or in the header of every page of your website during the sale period will create a sense of urgency, and more conversions will happen as visitors try to shop more before the time runs out.

        Using the Countdown Timer widget of VWO Editor, you can easily add a Countdown Timer to your webpage without writing a single line of code. All you need to do is, select the position on your webpage to install the Countdown Timer and configure the available settings per your requirements. 

        The timer can be started when the page loads or based on an action on the page, say when you feel the visitor is exiting the website. You even have options to show a message when the timer runs out or trigger a custom code to perform an event.

        While adding the Countdown Timer on your webpage using VWO Editor, you can:

        • Choose its layout
        • Specify the custom start and end time of the timer
        • Specify what happens after the timer runs out (you can also trigger a custom event)
        • Show timer units- Years, Hours, Months, Minutes, Days, Seconds
        • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

      8. Social Share

        Social media is a powerful source for reaching out to your target audience, increasing visibility, and driving more traffic to your website. Adding social media buttons on your webpage makes it easier for your audience to easily share your content on different platforms like Twitter, Facebook, etc. 

        For example, you must add social share buttons like Facebook, Twitter, etc. Whenever you publish a new post, your visitors can actively share and promote it on multiple social groups and communities for other community members to see.

        Using the Social Share widget of VWO Editor, you can easily add share buttons for Facebook, Twitter, or LinkedIn on your webpage without writing a single line of code. You need to choose the position where you want to add the social share buttons on your webpage. As soon as you make your campaign live, the social share buttons are visible to your visitors.

        NOTE: As of now, VWO allows you to add the following social share buttons- Facebook, Twitter, and Linkedin.


        While adding a social widget on your webpage using the VWO Editor, you can:

        • Choose the social share buttons you wish to add from the available options.
        • Configure their placement on the page. You can use the move operation to fine-tune the position on the page.
        • Add trigger conditions to make it show up and disappear as per your requirement.
        • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

      9. Click to contact

        In the internet world, where many consumers are used to getting support over chat or filling out forms expecting to receive a callback, many still prefer to call to get quick help. Displaying your phone number or email address on your website gives the visitors all the details to reach out to you and establish contact. What can be improved further is to automate the small process of manually entering the contact details or copying and pasting.

        To cater to this, VWO comes with a Click-to-contact widget. A click to contact widget is as simple as its name-it enables your users to contact you over Call, WhatsApp, or email with a single click. All they need to do is click on a button to initiate the contact. 

        A click-to-contact button or link on your website makes it easy for your users to reach you quickly. Moreover, it makes your consumer’s lives easy, helps in increased conversions and better user experience.

        Using the Click-to-contact widget of VWO Editor, you can easily add a floating button on your webpage without writing a single line of code. Just choose the position where you want to add it, and as soon as you make your campaign live, it will be visible to your visitors.

        While adding the Click-to-contact widget on your webpage using VWO Editor, you can:

        • Choose to add any of the following contact options on your webpage: phone, email, and WhatsApp
          NOTE: Fill in the fields corresponding to the option you choose. The phone number is a mandatory field for phone and WhatsApp, while for email, the email address is the mandatory field. 
        • Choose to display the contact details in detailed or minimised states. In addition, you have the option to initiate the contact directly from a minimised state
        • Specify the headline, caption, and description for your widget
        • Choose when to show the widget on your page. To learn more, refer to Widget Triggering Conditions in VWO

Adding Widgets to Your Webpage

You can add a new widget on your webpage using the Add option present in VWO Editor. Say you want to test if having a widget works better for your website, create an A/B test campaign as prescribed in this article, wherein when creating a variation using the VWO Editor, perform the following steps:

  1. To add a new widget to your webpage, click Library from the VWO Editor dock at the bottom. By default, it opens the Widgets section under the VWO Gallery tab.
  2. Click on the widget you want to add to your webpage.
    The widget gets added to your webpage.
    NOTE: By default, the widget that you add to your webpage has some sample content. Click on various components of the widget to access the Edit Element option of VWO Editor. You can modify the Widget content based on your requirements.
  3. Once you have added a Widget, you can modify its layout using the Widget Settings Option. Clicking on any component of the Widget will show a Widget Settings option in the context menu.
  4. To modify other attributes of the Widget, use the Edit Element option. Clicking on this option opens up the Edit Element dialog.
  5. To configure where this form submits the data, refer to Working with Forms in VWO.
  6. Click DONE to save your changes.
Wish to learn when it's best to show a widget so that the relevance of each information you display on your website improves and conversions rise? Refer to our article on Widget Triggering Conditions in VWO.

Example Scenario

Add a banner at the top of your webpage about the ongoing sale on your website. The banner should display- “Sale starts on the 22nd of December”, and the CTA button should be labelled as “Learn more”, taking the visitor to a certain URL. To realize this scenario, follow these steps in the VWO Editor:

    1. Under Widgets > Banners, click the Promotion banner. The promotion banner widget gets added to your webpage.
      NOTE: By default, the widget gets added at the top of your webpage with some sample content. 
      Screenshot_2019-11-15_at_3.58.27_PM.png
    2. To edit the banner content, click on the default content that appears on the banner.
    3. From the Element Editor Pallet that appears, click the Edit Element option.
      The Edit Element popup appears.
    4. Go to the GENERAL tab, and in the Text field, enter- “Sale starts on 22nd of December”.
    5. Click Done.
    6. Likewise, click on the BUTTON element on the promotion banner and select the Edit Element option.
    7. In the Edit Element popup that appears, enter “Learn More” in the Text field and specify a valid URL in the URL field.
    8. Click Done.

After executing the steps present in the above procedure, the banner on your webpage would look like this:

VWO Widgets FAQs

    1. Are VWO widgets responsive?
      Yes, all VWO widgets are responsive by default. However, this might be affected based on how you customize the content of the Widget. You can switch to mobile mode to see how it appears. We highly recommend that you preview the Widget on both mobile and desktop before making it live.
    2. What happens when a user clicks on the cross button?
      The Widget is dismissed for the user. The Widget will show up again as soon as the visitor navigates to another page included in the widget targeting or refreshes the page. The options to customize this will be available soon in the widget options menu.
    3. What happens when a user submits a form?
      The form action defined in the Widget comes into play and decides the next step. The Widget will show up again as soon as the visitor navigates to another page included in the widget targeting or refreshes the page. The options to customize this will be available soon in the widget options menu.
    4. When is a widget shown to the visitors?
      As soon as the targeting condition of the test/campaign match, the Widget is visible to the visitors.

    5. I want to make more changes to the page; how to hide a widget?
      If you wish to hide a widget from your webpage, click on the widget that you want to hide and select the Hide option from the Element Editor Pallet that appears.
    6. How to remove a widget?
      If you wish to remove a widget from your webpage, click on the widget and from the Element Editor Pallet that appears, select the Remove option. You can also use the Undo option present at the bottom of the VWO Editor.
      NOTE: We recommend you don't use the Remove option present in the widget context menu as it may not completely remove the widget code from your variation.

Was this article helpful?

Return to top

Related articles