How to Add External JS/CSS Libraries in VWO?

The code editor is a powerful tool for users to implement changes on test variations using code. Using the editor, you can edit the variations by directly editing the JS/CSS of the webpage and import custom libraries or a standard library using the quick add option.

Let's learn how you can add custom JavaScript and CSS to your variations using VWO Editor.

Adding Custom JavaScript

If you wish to add your custom JavaScript in a variation, follow this:

Procedure

1. Select the variation you want to edit and click Code at the bottom of the VWO Editor.

2. To add your own JS library, click the ellipsis() corresponding to the JavaScript tab and select Include External JavaScript.
   

3. In the External file path field, enter the file path to your custom JS and click DONE.

4. Alternatively, there are a few common JavaScript libraries included in the Quick Add drop-down. You can select one and click DONE. By default, jQuery v1.4.2 is already included inside the Code Editor.
   

Adding Custom CSS

If you wish to add custom CSS in a variation, follow this:

Procedure

1. Select the variation you want to work with and click Code at the bottom of the VWO Editor.

2. To add external CSS, click the () corresponding to the CSS tab and choose Include External Stylesheet.
   

3. In the External file path field, enter the file path to your custom CSS and click DONE.

4. Alternatively, there are a few common CSS libraries included in the Quick Add drop-down. You can select one and click DONE.