Heyflow is a no-code tool that allows you to build, design, and integrate your heyflows without the need to program. However, we allow you to write your custom JavaScript to expand Heyflow's functionalities.

Heyflow-Screenshot – benutzerdefinierter JavaScript-Code

How to add custom JavaScript

You can find the Code editor on the left side of the Build section. Here, click on JavaScript at the top.

Any code that is written (and saved) in the JavaScript code editor, will be loaded and executed just before the heyflow loads. So, for example, if you write the following line in the editor and save the changes, an alert appears:

alert('Heyflow World!');

Heyflows expose their lifecycle through our Heyflow Events API. Check out the guide to learn more about that.

Although possible, we do not recommend modifying your heyflow's data, DOM, and HTML through your JavaScript because you might break your flow and the underlying flow architecture might change so your implementation breaks. Future Heyflow improvements and changes cannot take your custom JavaScript into consideration.

Also, be aware that if you have embedded your heyflow on a website, the code you write is not bound to your heyflow and will be executed in the window .

If you agree to the limitations, here's an example to pass the full URL of your heyflow to your response:

const input = document.createElement('input');
input.type = 'text';
input.name = 'fullURL';
input.id = 'fullURL';
input.setAttribute('data-label', 'Full URL');
input.value = window.location.href;
input.style = "display:none;"

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementsByTagName('form')[0];
    form.appendChild(input);
});

Technically, this snippet creates an input field, names it, sets the (system) label, assigns it a value, hides it from the user, and then adds it to the form data.

You can set input.value to any value you like. For example, if you want to pass the current date, write input.value = new Date().toJSON().split('T')[0];` (Format: YYYY-MM-DD).

Custom JavaScript in Heyflow Embeds

If you use our web component embeds and have custom JavaScript in your flow, you need to make sure that DOM queries, manipulations, etc. target the shadowDOM of the web component.

One way to achieve this is to check on the heyflow-init event (see Events API), whether there is a shadowDOM and use that for any subsequent queries like so:

let shadowRoot;
window.addEventListener('heyflow-init', (event) => {
    shadowRoot =
    (document.querySelector(`[flow-id="${event.detail.flowID}"]`) &&
        document.querySelector(`[flow-id="${event.detail.flowID}"]`)
        .shadowRoot) ||
    document;
    shadowRoot.querySelector('foobar').value = "baz";
})