What Is VWO Code Editor

Last updated

VWO Code Editor is an advanced VWO feature for users who want to code the 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.

ATTENTION The code editor is currently available for A/B tests and Personalization only.

Using Code Editor, you will be able to directly modify variation code 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.

Alternately, you can switch to code-only editor by clicking the Edit Code (</>) on the lower-left side of the visual editor.editor-55

In the Code Editor window, you can add custom JavaScript/CSS. Using the option, you can also add external JS/CSS to your variation. To learn more on how to add External JS/CSS, click here.editor-56

Modifying Code in a Variation

To modify the code snippet of a variation, click the Edit Code option on Variation Settings.editor-49

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.editor-57
You can write a custom code in the editor or modify existing operations. If you are using VWO notations, the editor will automatically identify it and map it 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 refer to the list of VWO operations, click here.

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 which 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/JSS on the lower-right side of the editor.editor-58

To learn more about adding test JS/CSS, click here.

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

Product
Resources Home