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

VWO Blog

A Blog Around Everything Conversion Optimization And Beyond

Never miss an update from VWO

A value for this field is required.

Get Hands on With the New VWO Code Editor

We’re passionate about making the process of setting up A/B testing campaigns as simple as possible. Visual editor in VWO has been enabling you to create simple campaigns in minutes without any hassle. This works well for a majority of our users. However, our power users have always asked for a more flexible way to create and edit variations.

You asked, we listened.

Introducing VWO Code Editor.

What is VWO Code Editor?

This new feature is an advanced addition to the Visual Editor. Code Editor allows you to take full control over the actual code that will run for the variations on your website. Using VWO code editor, you can modify the code of native VWO operations according to your needs and add your custom code in the tool itself.

How to Use the Code Editor?

You can view the code by clicking on Variation Settings icon Screenshot 2015-09-24 15.05.31 and then clicking on the Edit Code Screenshot 2015-09-24 15.09.15 button. Alternatively, you can click on Code Editor Screenshot 2015-09-24 15.12.15 button at the bottom left corner of your visual editor screen.

Whenever you make any changes to your website pages, VWO creates a line of JavaScript code in the backend. You can modify the generated code to implement any changes if needed.

Screenshot of the VWO Visual Editor

You can also write custom JS/ CSS code into the Code Editor and it will be saved and implemented in the variation. Note that if you want your code to be mapped to a VWO operation, you’ll have to use VWO notation. Find more about it here.

Screenshot of the VWO Code Editor


5 Reasons Why You Will Find VWO Code Editor Super Useful

#1 Make simple tweaks to the changes you make through the visual editor

You don’t have to be an expert to be able to make the most out of VWO Code Editor. Once you click on ‘Edit Code’ button, the editor will show you a line of JS code for every change you made with the visual editor. This makes it very simple to make minor tweaks to the modifications.

#2 Create custom variations directly using the Code Editor

VWO Code Editor gives you the ability to make custom changes to your variation directly from the editor. You can write the JS/ CSS which you want to implement and click ‘Done’ to see them reflect on the variation.

#3 Code Editor gives you the power to change multiple similar elements at once

If you have many similar elements on a certain page and want to change them all, doing it individually will be a pain. You can use the Code Editor to make a change to all the elements at once. All it needs is a simple understanding of CSS selectors.

#4 Ability to load external JS/CSS libraries to your variations

Say you want to add a modal library or Bootstrap as a part of your variation or maybe you want to test out a live chat widget. All you’d need to do is click on ‘include external javascript’ and add the JS file in the VWO Code Editor. We also provide a selection of popular libraries to quickly add to your variations.  

Screenshot - VWO Provides a Bunch of Popular Libraries

#5 You can add global JS/CSS

VWO Code Editor also allows you to add custom JS/CSS to your campaign i.e. it applies on  all variations including your control. This can be done by clicking on ‘Add Global JS/CSS’

Adding Customer JS/CSS To Your Campaign

By default, your global JS applies after the campaign code is executed. Some of the cases you’d want to add a global JS could be

  • Sending VWO campaign data to your analytics suite
  • Defining a custom conversion goal in your campaign and tracking it
  • Triggering survey/notification variations based on the page variation served

Read more about how to do these, here.

Some of our customers are already in love with the VWO Code Editor.

The VWO Code Editor is wonderful. I showed it to a bunch of my clients and we’re all excited for how it’ll help create advanced campaigns easily. 
Nate Shurilla, Associate Director, Value Drive Inc.

We are continuously adding a lot of exciting new features to our editor. If you have any suggestions for new features you’d like to see or any feedback on the current features, please comment below or drop an email at

Marketing | SaaS | Product. Loves words, people, images, and experiences.

Comment (1)

Leave a Comment
  1. Nice post Sharan!

    When i read the title of your blog, i was confused but after reading the whole post, i am now very well familiar with this VWO code editor tool.

    It is very easy to use though, and have so many benefits, using a single line of javascript coding in the backend. I am thinking to give it a try. I want to create custom variations and add custom JS/CSS to my site, hopefully it will be implemented using this editor.

    Thanks for sharing a useful post. 🙂

Leave Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Contact Us / Login