If you're having trouble with gates that you've injected onto your webpage dynamically after page load, this article will help you solve common issues. This scenario is common when working with:
React, Vue.js, or Angular frameworks
A/B testing platforms
Any code that dynamically modifies a webpage after loading
The problem
The Formulayt installation script only searches for gates on the page during initial load. Any gates added to the page afterward by these frameworks will not be found or processed.
The solution
To resolve this issue, modify your application's code to call the following JavaScript function whenever you render a new modal or inline gate to the page:
gcdc("loadGates");Since this code will throw an error if the Formulayt scripts haven't finished loading, consider wrapping it in a standard JavaScript try/catch statement:
try { gcdc("loadGates"); } catch (e) { console.error("Formulayt scripts not loaded yet", e); }Important notes:
The Formulayt installation scripts automatically run this function once during initial load
It's safe to call this function multiple times, and doing so will not duplicate gates
Avoid calling this within a setInterval loop for performance reasons
Run the function after all relevant DOM updates have finished
Implementation details
How and where you implement this depends on your specific application. Check your framework's documentation for instructions on detecting DOM or model changes:
React: Use useEffect or componentDidMount/componentDidUpdate
Vue.js: Use updated lifecycle hook or watch
Angular: Use ngAfterViewInit or subscription to route changes
Special note for modal gate links
If you're changing the HREF attribute of a link that already opens a gate, follow these additional steps:
Remove the
gcdc-modal-linked="true"custom data attribute from these linksThen execute
gcdc("loadGates")
This attribute is added by the Formulayt script when it processes a modal gate link to prevent modifying that link again (for performance). Removing it resets the links and allows them to point to a new, different gate.
// Example code for changing a modal link
const modalLink = document.querySelector('#your-modal-link');
// Remove the attribute that marks this as already processed
modalLink.removeAttribute('gcdc-modal-linked');
// Change the href using the gate code
modalLink.setAttribute(‘href’, ‘#example-gate-id-1234567890’);
// Tell Formulayt to reprocess gates
gcdc("loadGates");