You can execute your own JavaScript code in your heyflow from our Code section as shown below.

Disclaimer: Running JavaScript is supported only to some extent. We cannot guarantee that what runs fine once will run fine forever when we update the flow and the app. So, be cautious with hacky JavaScript and try to rely on the options in the App if you can. (It will probably run fine forever in your published version if you don't update.)

Available Functions´╗┐

init() is the function that executes when the flow is initialized and thus is fired once, irrespectively from which screen is loaded.
´╗┐

onRender() is the function that executes every time a flow screen renders. The first argument of that function is screenId. The screenId is unique and immutable and differs from the screen name you can adjust for each screen.

Find the Screen ID

To find the screenId, right-click your flow, either the published one or the preview in the app, and click "inspect element" to find the element in DOM. Each section (equals a screen), has an ID and a name. Find the id of the element that matches the name.

You can also run this snippet to find the screen ID. Replace start in the first line with the name of your screen.

const screenName = 'start'
[...document.getElementsByTagName('section')].find(screen => screen.getAttribute('name') === screenName)?.id;

Example

The following snippet is an example of how to a) define a global variable and b) execute some code (here: an alert) only on one particular screen.

// Define global variables outside the scope of the functions
let globalAbc;

window.Client = {
init: function() {
// Do something on initialization
globalAbc = "I am global and I have value";
},

onRender: function(screenId) {
// Do something when a screen renders
if (screenId === 'screen-xzy') {
alert('Hello world');
}
}
}

Did this answer your question?