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 Clone 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);
}
});

  • 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.
  • 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:

if (window.timerX) clearInterval(window.timerX);
window.timerX = setInterval(function() {
if (vwo_$('E1').length) {
// script S1 here.
clearInterval(window.timerX);}
}, 100);

 Remember to implement this change in all your supported browsers before going live.

  • While modifying AJAX content using VWO campaign builder, please note that VWO applies changes to the element as soon as the code is loaded and doesn’t wait for full page to be ready. In case an element is created later on the page through AJAX, embedded elements, or Javascript use the following JS code using VWO code editor.

vwo_$(function(){
_vis_opt_element_loaded(campaign_id); //change campaign_id as per the experiment ID
});

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 above case would be to use Edit HTML or Edit operation to cut that element’s HTML from its parent container and move into the target container element.
  • Hence Move operation is much better suited in situations where something needs to moved by small amount within its current location.

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