NOTE: The classic code editor featured in this article is only available for non-Data360 accounts, while accounts enabled with Data360 will experience the code editor with Code Blocks, which allows for incorporating code changes in a more organized and sophisticated way. To enabled your account with Data360, reach out to VWO support.
VWO Code Editor is an advanced VWO feature for users who want to code changes on their website. Code Editor allows you to modify the code of native VWO operations according to your needs and add your custom code to the tool. To learn more about JS code snippets for VWO operations, click here.
Using the Code Editor, you can modify variation code directly or add external JS/CSS to a variation or even modify code at the test level.
-
Accessing Code Editor
-
Modifying code in a variation
-
Adding JS/CSS for the test
Accessing Code Editor
If you are an advanced user and want to use code-editor to write custom variations code instead of the Visual Editor, select the Open in Code-only Mode option on the first screen (Campaign URLs) page of your test creation process. Please note that the variations created through this mode will not be editable through the Visual Editor and vice-versa.
Alternatively, you can switch to a code-only editor by clicking the CODE option on the horizontal panel at the bottom of the visual editor.
In the Code Editor window, you can add custom JavaScript / CSS in the respective tabs. Using the option, you can also add external JS/CSS to your variation. To learn more about adding External JS/CSS, refer to How to Add Pre/Post-Campaign JS/CSS.
Modifying Code in a Variation
To modify the code snippet of a variation, click the Edit Code option on Variation Settings.
Whenever you make any changes to your website pages using Visual Editor, VWO creates a line of JavaScript code in the backend for every change you make. You can modify the generated code snippet to implement changes to the element.
You can write custom code in the editor or modify existing operations. If you use VWO notations, the editor will automatically identify them and map them to a VWO operation. However, if the notation does not map to the default VWO operations, it will be logged as a Custom JS/CSS operation. To learn about the list of VWO operations, refer to JavaScript Code Snippets for Standard VWO Editor operations.
Adding JS/CSS for the Test
Using VWO Code Editor, you can also add the test-level JS/CSS to execute before or after applying the variation changes. Test JS/CSS is the code that will run across your website, including all variations and the control. You would add global JS/CSS when you want to implement a change across all your test pages, including the control.
Click Campaign JS/CSS on the lower-right side of the editor.
To learn more about adding test JS/CSS, refer to How to Add Pre/Post-Campaign JS/CSS.
Adding HTML
If you wish to build changes on your webpage using custom code from any component you may be using for your website, use the Edit Code > HTML section of the VWO Editor. This provides you with a blank canvas where you can add your code.
If you wish to build changes on your website by adding components by their custom code, use the Edit code > HTML section of the VWO Editor. You can code from scratch or quickly re-use any website component that is already developed.
When you add custom HTML code, the new content gets appended to the bottom of the page. Once added, you can rearrange or move these across the webpage as per your requirement. You can also create your widgets to use on the page with Javascript functions inside the HTML.
For instance, if you wish to use the code of a banner or pop-up widget you used for a previous campaign, all you need to do is- Grab its HTML and add it to the page. You can now modify and reposition the contents based on your requirements—all this within VWO’s Editor.
To learn about some testing ideas which can be implemented easily using custom HTML on the web page, refer to this product update.
Some Additional Settings
Some settings that you can use while working with the Code Editor in VWO.
-
Code Linting: Linting is the automated checking of your source code for programmatic and stylistic errors. This is done by using a lint tool (otherwise known as linter). A lint tool is a basic static code analyzer.
-
Show code suggestions: It helps you complete the names of classes, methods, fields, and keywords within the visibility scope. This helps you speed up your coding and reduce the keyboard input time using.
NOTE: Only applies to JavaScript
-
Code Wrapping: It allows you to wrap the long lines of code within the editor. This brings in better readability.
NOTE: Only applies to JavaScript