Why

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.

Disclaimer: Unfortunately, we cannot support you on your custom JavaScript – beyond what is explained in this guide. Also, your custom JS might be the reason your flow does not work anymore – remove it before you contact the support, please.

Where

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

How

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).

Did this answer your question?