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 and then clicking on the Edit Code button. Alternatively, you can click on Code Editor button at the bottom left corner of your visual editor screen.
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.
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
#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’
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 email@example.com.
PS. If you liked this piece, you will probably love our other posts. Subscribe to the blog to get research-driven original content delivered right to your inbox, fresh and warm.
100% privacy guaranteed. We will never share your details.