This website works best with JavaScript enabled. Learn how to enable JavaScript.

Best Practices for Using VWO Editor

Last updated

Edit HTML or Edit operation

  • When you use HTML or Edit HTML operation for an element you want to modify in a web page, the editor displays the content (rich formatted or raw HTML) of the particular element. After your modifications, the final new HTML content of that element is stored by VWO. While implementing the change on the page element, VWO replaces the original HTML of the element with the new (modified) HTML saved in VWO editor.
  • DO NOT use Edit HTML or Edit operation on dynamic content such as product image/price/description, cart product count, dynamic headlines, and so on.
  • Use Edit or Edit HTML operations on specific elements that require minor modification or to change a single element in a web page. We do not recommend to use full page edit html operation.
  • If you want to add new content on a page, use Copy Element operation to clone the element and then edit the cloned element using the Edit or Edit HTML operations
  • Use other operations like Move, Resize, Change Text wherever possible. They do not interfere with the dynamism of any element
  • We recommend using Add JavaScript/CSS operation to modify your elements with CSS and JavaScript
  • Avoid using multiple Edit HTML operations on the same set of elements. You can use one single html operation to apply all the required changes. The following screenshot displays an example of how the overridden changes appears on VWO editor if you apply multiple operations on the same element.

Add JavaScript

  • If you use the Add JavaScript operation to add a JavaScript/jQuery to change some elements in the web page, you might notice a flicker (original content will flash before change is applied) on the live site. Use setInterval function to check for the target element, and as soon as it’s available, then apply the change as shown in the following code:

// Avoid multiple setIntervals gettings started.

if (window.vwoElInterval) {

    clearInterval(window.vwoElInterval);

}

window.vwoElInterval = setInterval(function() {

    if (vwo_$(CSS_SELECTOR_PATH_OF_ELEMENT).length) {

        // Make changes that require the element to be present

        clearInterval(window.vwoElInterval);

    }

},100);

You can add the setInterval function from the Add JavaScript section of the code editor and them modify the code accordingly.

Note: As a best practice, make sure to provide a unique name to the variable for every block of setInterval that you add. In the above example, the variable name is window.vwoElInterval. This can be changed to window.vwoBannerImage or any other meaningful name as well.

  • Flickering does not occur with any other operation because the Visual Editor knows the exact elements modified and hides them until variation change is loaded. Remember to implement this change in all your supported browsers before going live.
  • In case you have used VWO’s visual editor to apply changes and they do not reflect on the page when you Preview the test, there could be a possibility that the elements on which the changes are applied load on the page after the changes from VWO have been fired. In such a case, you can use the following code snippet. It repeatedly checks for the elements on which the changes have been applied and applies the changes to them as soon as they are loaded on the page.
  • Use setInterval function to check for the target element and as soon as its available and then apply the change as shown in the following code:
vwo_$(function() { _vis_opt_element_loaded(campaign_id); /*change campaign_id as per experiment ID*/
})

From the Add JavaScript section in Code Editor, click the Poll until element is changed option to add the function and modify the code accordingly.

If this does not work then you need to apply the change through JavaScript code using VWO code editor. While writing a custom JS code, it is recommended to use vwo_$ (VWO’s inline jQuery handle) instead of $. This would ensure that JS code is executed when VWO code is triggered and is not dependent on the page’s jQuery.

Add Styles (CSS)

If you are using the code editor to add CSS properties within within <style> tag, make sure to use “!important” with each property to ensure that all previous CSS properties are overridden and changes in variation is implemented.

Example

.class-name
{
Attribute1=value !important;
Attribute2=value !important;
}

Change Image

If you are adding a new image for your variations using Change Image operation and the image size is bigger than the control, the original image might show for a moment before the variation image is loaded. To avoid flickering in such cases, use Edit HTML operation or the code editor and use Hide operation on the image in the control.

Within the Edit Html or JavaScript code add a style attribute with value as display:block !important so that whenever this operation is executed its visibility is set to true. When a visitor lands on the web page, the hide operation will ensure the control image is hidden and the new image will display when Edit Html/JavaScript code have rendered the image.

If you enter the image URL on your own server, it could further reduce the loading time and overall flickering affect.

Move operation

  • Move operation on any element moves is relative to its current position in exact pixels you specify.
  • Imagine moving an element by a huge distance into some other section on the page. Now that section can be visible somewhere else based on the screen size (which is very popular these days using media queries). In that case your moved element won’t appear at the place you wanted it to be.
  • A better approach in such cases would be to write custom CSS changes. You can also include media queries to apply the changes based on the screen width.

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login