CSS and JavaScript Injection

This feature will allow you test set up custom global CSS and Javascript per test group. You will need to enter our builder mode to see this feature. To do that, you can preview a test that you have set up. Once the preview has popped up you can click the edit button at the bottom right of the widget. If the buttons text changes to Login press the button again to login to authenticate your account. Once that is complete, click the </> button on the widget to enter this mode.

Editing the CSS of an Element

Once you click the </> button on the widget a modal will pop up. By default, you will start on the CSS tab. If you want to add CSS to an element on your page, all you need to do is find the classname of that element via the dev tools inspector. If you need a refresher on how to get your classnames you can refer to this video. Once you have that classname, you can alter the styles of that element! See example below.

Make sure to change the test group with the dropdown at the top of the modal to the test group where you'd like to edit the CSS.

if you want to chain CSS properties together you would want to use this syntax

.your_class_here {background-color: blue; color: white;}

Editing the JavaScript

Once you click the </> button on the widget a modal will pop up. Here you can toggle to the JAVASCRIPT tab. If you want to add Javascript to your page, all you need to do is enter valid JavaScript into the editor! Make sure to change the test group with the dropdown at the top of the modal. See example below.

You can also attach event listeners while in this mode and use the auto complete feature to program faster!

If you enter non-validate Javascript into this editor you will see syntax highlighting.

Last updated