Previewing Variation of Your A/B Test in VWO

Before making the variation of your A/B test live, it is a good practice to ensure it retains all the changes you've made. The Previews tab in your VWO Test campaigns provides a convenient way to quickly check and validate your variations without having to dig through the test settings. It typically ensures that your variation has no broken links or sections, and functions as expected for your website visitors.

You can preview your variations in two ways:

• Via the Previews tab
• Via VWO Visual Editor

Previewing a Test Variation via the Previews Tab

To preview the variations of your A/B test via the Previews tab, perform the following steps:

1. From the A/B Test dashboard, select the test you want to preview and go to the Previews tab.

2. From the Variation dropdown, select the variation you want to preview.

3. In the Preview URL field, the Default Campaign URL is auto-populated. If you want to load the previews for a different URL, you can override it with the one on which you want to preview the changes.

   NOTE: If your campaign is running on multiple pages, you can preview them individually.

4. To preview the variations without applying the campaign-level segmentation conditions, select the Ignore campaign targeting conditions in previews option. You can view the segmentation conditions by expanding the View targeting conditions section.

   NOTE: The Ignore campaign targeting conditions in previews option appears only when you have applied the pre-segmentation conditions at the campaign level in the URL(S) page.
   

5. Once done, click Preview in a new tab. The preview opens in a new tab displaying the variation that you have selected.

6. In the preview window, a Preview Mode debugger pop-up appears in the lower right corner which displays the information about your A/B Test campaign.

   The Preview debugger popup comes with the following options:
   

   	To copy the direct preview link to be pasted elsewhere or shared with someone. This option comes in handy when you’re looking to verify the variations across different browsers or devices. You can choose to use the direct preview link or scan the QR code from your mobile to verify the variations in mobile browsers.
   	To switch the position of the pop-up to the left of the screen
   	To switch the position of the pop-up to the right of the screen
   	To minimize the pop-up
   	To close the pop-up

   
   While previewing, you can perform the following actions to verify the campaign setup:

   • Switch to the other variations by selecting correspondingly from the variation dropdown in the debugger pop-up.

   • Click on the Campaign Name to verify the details about the campaign and the logs of page visits for the current page within the Test information and Logs for page visits sections. You can expand each of the sections to view the respective details.

   • Trigger a goal to verify if it is working fine. If the goal is triggered, the corresponding status will be updated under the Logs for page visits section.

     TIP: Before verifying the goal, clear the page visit logs by clicking on the CLEAR option in the Logs for page visits section. This helps you identify if the goal is being tracked.

Previewing Screenshots of Your Variations

Using the Screenshot Previews section under the Previews tab, you can view the screenshots for your variations based on the modifications that you have made. Here, the screenshots of all your variations appear as thumbnails. To preview the screenshots of your variations, perform the following steps:

1. Go to the Previews tab, and from the panel on the right, click Screenshot Previews.

2. To view a screenshot, hover on the screenshot thumbnail and click View Screenshot.
   

3. On the screenshot that appears, you have the option to view the screenshot of your variation in specific browsers. To do this, select the variation and the browser from the respective dropdowns and click Go. Alternatively, you can also use the Select Browsers dropdown present in the top right corner of the Screenshot Previews section to load screenshots of your variations in different browsers.

   NOTE: If you’re viewing the screenshots for the first time, they may take a few seconds to generate depending on the server load.

Additionally, you can also group your variations based on the Browsers and Variations using the Group By screenshot settings present in the panel on the right.

Previewing a Test Variation via VWO Visual Editor

Previewing your changes in the Visual Editor is the quickest way to verify your changes right away, once you make them. To preview the variations of your A/B test via VWO Visual Editor, perform the following steps:

1. From the A/B Test dashboard, select the test you want to preview and go to Settings > Variations.
2. Click the Edit option corresponding to the variation that you want to preview. This takes you to the VWO Visual Editor.
   
3. Alternatively, you can directly reach the Visual Editor by selecting the test campaign from the dashboard, clicking the vertical ellipsis at the top-right of the screen, and selecting the Modify in Editor option.
   
4. From the Variations panel inside the Visual Editor, click the vertical ellipsis corresponding to the variation that you want to preview and select the Preview option.
   
5. By doing so, an alert pop-up is displayed informing that any unsaved change that is made to the variation will be auto-saved as soon as the preview is displayed. If you are fine with proceeding further, click the Preview button in the alert pop-up. The preview of the variation opens in a new tab.
   
   NOTE: You need to configure your browser to allow pop-ups in order for the previews to open.
   INFO:

   • You can have only one preview tab open per version (control or variation), irrespective of how you access the option.

   • The title of the browser tab indicates the version number of the variation ([v1], [v2], etc.) that you’re currently previewing. This way you can identify the variations when you have several preview tabs open on your browser.

   • The preview tab of a given variation will automatically reload with any further change that is saved in the Visual Editor for that variation.

   Related Concepts How to Verify Test Goals Setup Using Live Previews? How to Check Segmentation Through Live Previews?