How to Use the VWO Plugin?

What is VWO Plugin?

The VWO Plugin is a software add-on to VWO that enhances its capabilities by offering extended features, such as adding Observations with screenshots while viewing heatmaps and session recordings, ensuring smooth and fast loading of websites in the Visual Editor, mitigating CSP restrictions while accessing session recordings, and more.  Even if you want to try out the VWO Visual Editor without installing the SmartCode on your website, the plugin makes it possible. Apart from Chrome, you can also use this plugin in other Chromium browsers, such as Opera and Brave. Installing this plugin is highly recommended when using VWO Testing and VWO Insights for an enriched optimization experience.

How to Install the VWO Plugin?

To install the VWO plugin, perform the following steps after logging in to the VWO app:

NOTE: You can install this plugin only on Chromium browsers like Chrome, Opera and Brave.

1. Add the plugin to your browser from here.
2. On the installation confirmation popup that appears, click Add extension.
3. Now, open the VWO plugin. You can see that the plugin has autodetected your VWO account number and is ready to be used.

How to Use the VWO Plugin?

VWO Plugin essentially gives you two functional features and a bunch of configuration features, as follows:

Screencapture Your Observations

Capturing a problem area or anything notable on your website, especially while viewing a heatmap report or a session recording, could be crucial. Though you can add observations while viewing a heatmap or a session recording, you can only add text information to your observation. With the VWO plugin, you can grab any screen from anywhere and add observations. These observations will be saved to your VWO account. Just like that! 

If you are on a webpage where you need to quickly record an observation, perform the following steps:

1. On the OBSERVATIONS section of the plugin, turn on the observation mode by clicking on the toggle switch.

2. Now, click on the spot on the page where you wish to add your observation.
3. In the Add Observation popup, enter your observation and add labels in the Labels field.
   
4. Click Add. 
5. To exit the Observation mode, click Exit Observation Mode at the bottom of the screen. 

The observations that you add get saved to your VWO account. You can access it anytime from Plan > Observations, besides the OBSERVATIONS section on the plugin that gives a quick view of all your observations. You can search for an observation on the plugin by entering its description on the search bar.

NOTE: Once you have started adding observations, the Observation mode switch gets relocated to the bottom of the plugin.

Generate Testing Ideas With AI (Beta)

Sometimes, you would want to perceive things from a different angle. But somehow, you’re stuck in the same vision that doesn't go past the usual zone. Guess what? You’re never alone, and that’s why we gift you a more reliable help to get different insights in literally no time. 

You can now make use of an AI to generate ideas to be tested on your website. The AI provides you with a good bunch of hypotheses to choose from. Just land on the webpage where you need help, and click the SCAN PAGE button in the AI IDEA GENERATION section on the VWO plugin to start it off. 

ESSENTIAL: For the AI to scan your webpages, it is really necessary that you provide your consent to share data with the AI that is required to perform the intended function. You can do this by selecting the consent checkbox under the SCAN PAGE button after you thoroughly go through the terms by clicking on the Learn More link. 

Clicking the SCAN PAGE button allows the AI to scan your webpage and triggers the VWO AI popup where you need to confirm the following things:

• The AI detects your business type and the page type. If you find these details any less appropriate, you can overwrite them in the respective fields and click NEXT.
• Next up, define your business goal. You can either type it out or select one from the suggestions provided by the AI and click GENERATE A/B TEST IDEAS.

Voila, the AI generates a handful of hypotheses for you to run a VWO test campaign on your website. Ask the genie and get a pony!

Configure the Latency for Visual Editor and Heatmap Download

In general, VWO loads the Visual Editor once your website loads. Given the case that your website takes a longer time to load, the Visual Editor times out and will not open, making it impossible to create variations. The case is similar for heatmaps, too. To avoid such mishaps, you can increase the latency (wait time) of the Visual Editor and heatmap so as to buy some time for your website to load. By default, the latency is already set to an optimum value for loading the Visual Editor and the heatmap on your website, even on a slow network. If you’re still facing issues, you can simply override these values with optimal ones and click Save changes.

Apply Custom CSS and JS

Sometimes, when your website is viewed on the VWO Editor or on a heatmap, you could experience some disruptions in the appearance of the UI or its functionality. This could be due to some CSS or JS-based issues, which can be handled by supplying the appropriate CSS or the JS code respectively. 

What’s More?

Let’s say you have not installed the VWO SmartCode on your website, and you want to test out the VWO Visual Editor and the heatmap. These features typically require the SmartCode to function. However, when you have the VWO plugin installed, you can easily access these features whenever you need them. When the plugin is installed on your browser where you have logged in to your VWO account, it automatically detects your account number and injects the asynchronous SmartCode into your website (if your website doesn’t have it already) every time you attempt to access the Visual Editor or the heatmap.

Besides this, you also get to avail the following benefits to level up your optimization game:

• Mitigate CSP Restrictions: Content Security Policy (CSP) is a set of rules created by your website that instructs the browser about which sources (domains) are allowed to load resources like scripts, styles, and images on the web page. At times, you might encounter issues in loading your website in the Visual Editor and Heatmaps due to website security policies and content restrictions. In order to iron out such issues, the VWO plugin comes in handy. It automatically takes care of the CSP restrictions and ensures the smooth functioning of the Visual Editor and the heatmaps.
  
  
• Mitigate CORS & CORB Restrictions: Chances are there that while you’re viewing the session recordings or heatmaps, you may come to witness that certain UI elements on the webpage are not displayed properly. This is often due to the following security policies:

• • Cross-Origin Read Blocking (CORB) - This is a browser-implemented security mechanism designed to prevent unauthorized cross-origin web pages from reading certain types of responses, with a particular focus on sensitive data from other domains. CORB is enforced by the browser itself to enhance web security by blocking certain types of data access by web pages. 
    
    
  • Cross-Origin Resource Sharing (CORS) - This is a security policy that specifies which origins (websites or domains) are allowed to access its resources, such as APIs and images. It determines whether cross-origin requests are permitted and which types of requests (e.g., GET, POST) are allowed. This policy is configured by your website's server and is enforced by the browser, which checks the response headers from the server before allowing or denying cross-origin requests.

Typically, these policies prevent VWO from fetching certain assets like CSS from your website’s server. However, you can mitigate this with the VWO plugin, which modifies the headers while fetching such essential assets from your websites to overcome the issues that arise due to CORS and CORB restrictions.

• User Agent Control: Quite possible that when you're accessing or switching the device mode in the Visual Editor from Desktop to Mobile or Tablet, the website doesn’t appear in the selected mode.
  The background story is that when you're switching the view to a different device, VWO sends a request to your website's server with the user agent corresponding to the selected device mode. If your website's security setting denies the request, the Visual Editor will not be able to render the required view.
  If you need to view the website in Mobile or Tablet mode, you can select the Prevent changing the User Agent while switching devices checkbox. This will enable the Visual Editor to render the desktop version of your website in the mobile or tablet-sized i-frame. 

• Block third-party ads and tracking library: There’s a good chance of your website having some third-party ads and tracking libraries that may not be specifically needed for the Visual Editor to function. These network calls might consume a considerable chunk of time to load. Therefore, the loading of the Visual Editor is apparently delayed. The VWO plugin effectively prevents such occurrences by blocking those unnecessary calls, enabling faster loading of the Visual Editor.

You can also allow the VWO Chrome plugin to work in Incognito so that it can optimize your experience while using VWO Testing and VWO Insights. For any queries, do reach out to support@vwo.com.