Skip to main content

2.6.2 How to capture and parse the LeadJourney Click ID with Heyflow Forms

Written by Jonas Strambach

If you're integrating Heyflow via an iframe on your parent site, please insert the following script into the parent site's code:


<script>
document.addEventListener("DOMContentLoaded", function () {
const clickId = localStorage.getItem('clickId');
if (!clickId) return;

// Heyflow Integration
function appendClickIdToAllHeyFlows(attempt = 0) {
const maxAttempts = 10;
const retryDelay = 500;

const wrappers = document.querySelectorAll('heyflow-wrapper');
if (!wrappers.length) return;

wrappers.forEach(wrapper => {
let tries = 0;
const maxTries = 30;

const interval = setInterval(() => {
if (!wrapper.shadowRoot) {
if (++tries >= maxTries) clearInterval(interval);
return;
}

const input = Array.from(wrapper.shadowRoot.querySelectorAll('input')).find(el =>
el.getAttribute('data-label') === 'lj_click_id' ||
el.getAttribute('data-variable') === 'lj_click_id' ||
el.getAttribute('name') === 'lj_click_id' ||
el.getAttribute('id') === 'lj_click_id'
);

if (input) {
input.value = clickId;
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
clearInterval(interval);
} else if (++tries >= maxTries) {
clearInterval(interval);
}
}, 300);
});
}

appendClickIdToAllHeyFlows();

window.addEventListener("heyflow-init", function () {
appendClickIdToAllHeyFlows();
});
});
</script>

If you're not using a parent site with an embedded Heyflow iframe and instead placing the code directly in the Heyflow header, please use the script below:

<script>
(function () {
function waitForClickIdAndSetInput(attempt = 0) {
const maxWaitAttempts = 20;
const waitDelay = 300;

const clickId = localStorage.getItem('clickId');
if (!clickId) {
if (attempt < maxWaitAttempts) {
setTimeout(() => waitForClickIdAndSetInput(attempt + 1), waitDelay);
}
return;
}

function setClickIdToInput(inputAttempt = 0) {
const maxInputAttempts = 20;
const inputDelay = 300;

const input = document.querySelector('input[name="lj_click_id"], input[data-label="lj_click_id"], input[data-variable="lj_click_id"], input[id="lj_click_id"]');
if (input) {
input.value = clickId;
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
console.log('Click ID injected:', clickId);
} else if (inputAttempt < maxInputAttempts) {
setTimeout(() => setClickIdToInput(inputAttempt + 1), inputDelay);
} else {
console.warn('Click ID input field not found');
}
}

setClickIdToInput();
}

waitForClickIdAndSetInput();
})();
function waitForClickIdAndSetInput(attempt = 0) {
</script>

Did this answer your question?