The Heyflow Events API exposes your heyflow's lifecycle for you to interact with using custom JavaScript, like this:

window.addEventListener('heyflow-screen-view', (event) => {
    console.log('heyflow screen view:', event.detail.screenName);
});

where heyflow-screen-view is the Event name of the life cycle event.

This Events API is especially useful if you want to implement your own, granular tracking or if you need to interact with the data of your heyflow client-side.

Your heyflow emits the following events per life cycle event:

Event name	Life cycle event	Payload
`heyflow-init`	When the heyflow loads initially.	`flowID`
`heyflow-exit`	When the tab/window in which the heyflow lives gets closed. This event is based on the native `pagehide` event which, unfortunately, is not entirely reliable.	`flowID`
`heyflow-change`	When the data of the heyflow is changed, e.g. by user input.	`fields`, `fieldsSimple`
`heyflow-submit`	When the heyflow gets submitted.	`screenID`, `screenName`, `fields`, `fieldsSimple`
`heyflow-screen-view`	When a screen/page of your heyflow is visited.	`screenName`, `screenID`, `screenIndex`, `previousScreenName`
`heyflow-screen-leave`	When a screen/page of your heyflow is navigated away from.	`screenName`
`heyflow-button-click`	When a button is clicked.	`customEventName`, `customEventLabel`
`heyflow-input-click`	When a Multiple Choice option or Picture Choice option is clicked on.	`customEventName`, `customEventLabel`

`fields` and `fieldsSimple`

fields and fieldsSimple hold all information of your heyflow in different structures.

fieldsSimple is a key-value pair, where the key is the label of the field and the value is a string (text) that holds the user-entered value:

fieldsSimple: {
    Choose your housing type: "Apartment",
    Email: "[email protected]",
    Consent: "✔",
}

If a field holds multiple values, like a Multiple Choice block, the values are separated by a comma (,).

The fields property is more verbose. It's an array with all fields. A single field holds the following information:

{
    // Each block has a static unique identifier, the ID:
    "id": "mco-fb5cd9b5",
    // The label is either the system label or block label you define:
    "label": "Please choose an option",
    // The values holds the user entered data in an array. If only one
    // value can be specified, e.g. an input field, it only holds one
    // object. If mutliple values can be speificed, e.g. for a Multiple
    // Choice block, it holds multiple elements.
    "values": [
        {
            "name": "mco-fb5cd9b5",
            "answer": "Option 2 label"
        }
    ],
    // The value is all answers from values (values[n].answers)
    // concatenated with a comma (,)
    "value": "Option 2 label",
    // The variable you have specified for this block.
    "variable": "mc-24115746",
    // If this block is flagged as senstivive as a boolean.
    "sensitive": false,
    // The static unique identifier (ID) of the screen this block is on.
    "screenID": "start",
    // The name of the screen the block is on.
    "screenName": "start"
}

fields and fieldsSimple

`fields` and `fieldsSimple`