CSS and JavaScript Injection

This feature will allow you to test 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. Enter the Javascript that you'd like to inject for the selected test group into the editor (you can change which test group you're editing using the dropdown above).

Interacting with the DOM

Injected Javascript will execute soon after Intelligems loads, which may be before the page has rendered. If you want to interact with the DOM with injected Javascript, we recommend adding a listener, for example:

function myDOMChanges() {
    document.body.setAttribute("data-my-change", "true");
}

if (document.readyState !== "loading") {
    // if the page is already ready, execute now
    myDOMChanges()
} else {
    // otherwise, add a listener
    document.addEventListener('DOMContentLoaded', () => {
        myDOMChanges();
    })
}

Our JS only runs once per page, and often very early into the page lifecycle, and so you may need to handle that situation as well. (ie wrap the code a setInterval or setTimeout` )