All Collections
Using the Mutiny Experience Editor
How to inject custom JavaScript in the Mutiny editor
How to inject custom JavaScript in the Mutiny editor

Mutiny makes it easy for you to inject custom code into the editor, enabling you to create larger scale changes to your web experiences

Updated over a week ago

Most of your experiences created in Mutiny do not require additional code to be added to the page. You can easily change copy, images, CTAs, as well as remove elements without the need for a developer. Once in a while, you might want to run a larger scale test, such as adding a completely new section on a page, or adjusting functionality on a page. In these instances, you can easily inject custom JavaScript into the Mutiny editor.

There are two approaches to adding custom JavaScript in Mutiny: attaching the code to the page, or to an individual element on the page.

Page-Level Custom JavaScript

How to add page-level custom javascript:

Step 1: Open the code editor.

Step 2: Click on your page-level script if it isn’t already selected.

Element-Level Custom JavaScript

This feature allows you to attach custom javascript to individual element personalizations on your page. The script is run whenever the Mutiny renders the personalized element. This can really come in handy if you’d like to add an event listener to your personalization, for example.

Step 1: Click on an element you’d like to add the script to.

Step 2: Open the code editor.

Step 3: Add your code and save.

Notice that we give you two parameters (element and hasRunBefore) which can be referenced in your script. For more information on these parameters, check out the tips and tricks section below!

Code Evaluation

Error Detection

Once Mutiny runs your script, you will be alerted if any errors are detected. Mutiny shows you an error pop up as well as other helpful UI hints.

Please note, that if your code has errors, Mutiny will still allow you to launch your experience. This is something to be aware of since the JavaScript you've written will still deploy on your site. If there is an error in your code, be sure to check it with a developer before launching to avoid potential site errors.

Element-level specific error reporting:

For element-level custom javascript, your script will only be evaluated for errors only if the personalization rendered on the page. To make sure your script is evaluated correctly, make sure to trigger your personalization to render on the page in the code editor after you create your script (if it hasn’t already). This is how you can tell if your script has not been run.

Some helpful tips and tricks:

Element-level Parameters

element: refers to the personalized element itself. Check out this doc on how to leverage this to track added elements.

hasRunBefore: refers to a boolean value. It tells you whether or not your script has already run.

Using other Mutiny dynamic variables in your JavaScript

If you're looking to add a dynamic variable, such as Company Name, into your personalization being injected via custom JavaScript, you can do so by leveraging the window object Mutiny passes on every page of your site. Under "visitor", you will see lots of valuable info, and you can leverage this info in your JavaScript within your Mutiny experiences. For example, if you wanted to dynamically insert geographic location, you could use mutiny.visitor.data.person.current_geo.country in your code.

Preventing Flicker

Normally, Mutiny will hide elements that are being personalized until they're ready to be shown to a user. This prevents the user from seeing a flicker of the original, unpersonalized version of the element (you can find out more about that process here). When using custom Javascript to edit elements, however, Mutiny doesn't know which elements are being personalized, and so it won't hide them automatically, which may result in a flicker. To avoid this, you can install this anti-flicker snippet above your Mutiny client to hide the entire page until Mutiny loads, or the timeout is hit (whichever happens first). Just like the Mutiny client, be sure that this script is loaded synchronously as high up in the <head> tag of the page.

<style>
html:not([data-mutiny-loaded]) .mutiny-hider { opacity: 0!important }
</style>
<script>
(function(h,i,d,e){
i.className+=' '+d;
h.setTimeout(function(){i.className=i.className.replace(RegExp(' ?'+d),'')},e);
})(
// The global object
window,
// The element to apply the async hider to
document.documentElement,
// The css class name of the hider
'mutiny-hider',
// The amount of time after which to remove the hider (if mutiny hasn't already)
4000,
);
</script>
//Mutiny client...


Don't be a stranger

If you have any questions, we’re here to help! Please feel free to contact us at any time, either through intercom chat or via support@mutinyhq.com.

Did this answer your question?