Saving and Using Modifications in VWO Editor

The most effective way to build your campaigns faster is by reusing the resources and not creating them repeatedly, as re-creating anything from scratch requires a lot of effort and time. The VWO Library enables you to reap the benefits of reusability, i.e., while applying modifications to an element, you can save the modification or a set of modifications in the VWO Library such that you can reuse them again.  

Assume you have several buttons on your website that need to have their appearance changed universally, including button color, text color, text size and font, as well as some border changes. You can make this change on one button, save it as a modification, and then apply it all at once to every other button that requires the same changes. This can happen within the same campaign or across different campaigns. This allows you to group multiple changes into a single modification and apply them with a single click, eliminating the need to repeat them across the different buttons.

You can find all your saved modifications in the My Library > Modifications section of the VWO Editor.

Saving Modifications in VWO Editor

The VWO Editor enables you to save your modifications using the following two options:

• View Details
  

  Using the View Details option corresponding to a variation, you can save your modifications in the VWO Editor. Once saved, they appear in the My Library > Modifications section of the editor.
  To learn how you can save your modification using the View Details option, follow this:
  
  Procedure
  
  
  1. 1. Go to the VWO Editor.
     2. Click on the View Details option corresponding to the variation you want to work with.
        
        NOTE: If you wish to view these modifications element-wise, enable the Group by element option. This gives you an intuitive way of looking at the changes made to a particular element.
     3. To save a modification, click on the vertical ellipsis icon (⋮) corresponding to it, and select the Save modification option.
        NOTE: If you wish to save multiple modifications, first enable the Group by element option. Next, click on the vertical ellipsis icon (⋮) of the element header (say a button), choose the Save modification option, and choose the ones per your requirements.
     4. In the Save Modification dialog, you can configure the following:
        
        • • • Name: This is a mandatory field where you must enter the name you wish to save your modification.
            • Description: This is an optional field where you can add some additional information about your modification.
            • Code / Markup: This field displays your modification(s) as a code block. If you wish to make any code-based changes, this is the place.
              
     5. To finalize your changes, click SAVE.
     6. Your saved modification is now available in the My Library > Modifications section.

To learn how to use saved modifications, refer to Using Saved Modifications in VWO Editor.

• Create Modifications
  

  Suppose you do not want to use any existing modifications and wish to create a custom modification from scratch. In that case, use the +Create Modification option present in the My Library > Modifications section of the VWO Editor.
  
  NOTE: To create a modification, you need to write custom code. For this, you may contact your development team.
  To learn how to create modifications using the +Create Modifications option, follow this:
  
  Procedure
  
  
  1. 1. Go to the VWO Editor, and from the options present at the bottom, select Library.
        The Library panel to the right appears.
     2. To create a modification, go to My Library > Modifications and click on the +Create Modifications option.
        The Create Modification dialog appears.
     3. In the Create Modification dialog, you can configure the following:
        
        • • • Name: Enter the name for your modification. This is a mandatory field.
            • Description: This is an optional field where you can add some additional information about your modification.
            • Code / Markup: In this field, write code to create your custom modification code.
              
     4. To finalize your changes, click SAVE.
     5. Your saved modification is now available in the My Library > Modifications section.
        

Using Saved Modifications in VWO Editor

If you wish to apply the existing modification(s) on an element instead of creating one from scratch, follow this:

Procedure

1. Go to VWO Editor.
2. Select an element on your webpage on which you wish to apply changes, and from the menu that appears, select Apply saved modifications.
   The Select modification to apply panel to the right appears.
3. From the Select modification to apply panel, choose the modification you wish to apply on the selected element.
   
   NOTE: Only the modifications that can be applied to the selected elements are enabled, while the ones that aren't are greyed out. For example, you cannot apply the change in text color modification to an image element.
4. Click Apply Modification. With this, the chosen modification is applied to the selected element.

Editing a Saved Modification

If you wish to make changes to a saved modification, follow this:

Procedure

1. Go to the VWO Editor, and from the options present at the bottom, select Library.
   The Library panel to the right appears.
2. To edit a modification, go to My Library > Modifications, hover on the one you wish to edit, and click on the vertical ellipsis icon (⋮) corresponding to it. From the options that appear, select the Edit option.
   The Edit Modification dialog appears.
3. In the Edit Modification dialog, edit the fields per your requirements.
4. To finalize your changes, click SAVE.

Deleting a Saved Modification

If you wish to delete a saved modification, follow this:

Procedure

1. Go to the VWO Editor, and from the options present at the bottom, select Library.
   The Library panel to the right appears.
2. To delete a modification, go to My Library > Modifications, hover on the one you wish to delete, and click on the vertical ellipsis icon (⋮) corresponding to it. From the options that appear, select the Delete option.
3. In the delete confirmation alert, click DELETE.