⭐ Available in the following bundle: All (limited), Insights Bundle (incl. in Scale)
⭐ Available on the following plans: Basic, Pro, Agency (limited), Business
👀 Not sure which plan you're on? Check your subscription here.
The Heyflow 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.
Our 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.
Events Overview
Your funnel emits the following events per life cycle event:
Event name | Life cycle event | Payload |
| When the funnel loads initially. |
|
| When the tab/window in which the funnel lives gets closed.
This event is based on the native |
|
| When the data of the funnel is changed, e.g. by user input. |
|
| When the funnel gets submitted. |
|
| When a page of your funnel is visited. |
|
| When a page of your funnel is navigated away from. |
|
| When a button is clicked. |
|
| When a Multiple Choice option or Picture Choice option is clicked on. |
|
fields and fieldsSimple
⭐ Available in the following bundle: Insights Bundle (incl. in Scale)
⭐ Available on the following plans: Business
👀 Not sure which plan you're on? Check your subscription here.
fields and fieldsSimple hold all information of your heyflow in different structures. This feature is only available with our Advanced Client Tracking feature.
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 page this block is on.
"screenID": "start",
// The name of the page the block is on.
"screenName": "start"
}