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"
}

Did this answer your question?