Skip to main content

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

Jonas Strambach avatar
Written by Jonas Strambach
Updated over 2 weeks ago

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?