Serve Happierleads from your own SaaS Script
To integrate Happierleads’ tracking script dynamically into any website, you can use the following JavaScript snippet.
This approach is useful in situations where you don’t want to hardcode the tag into your HTML file, but instead want to
insert it programmatically—such as in single-page applications (SPAs), widget-based apps, or when dynamically setting
the clientId based on user/session data.
const clientId = 'YOUR_CLIENT_ID'; // replace this with any dynamic value
const script = document.createElement('script');
script.innerHTML = `
!function(){
var e = "rest.happierleads.com/v3/script?clientId=${clientId}&version=4.0.0",
t = document.createElement("script");
t.src = "https://" + e;
var c = document.getElementsByTagName("script")[0];
t.async = true;
t.onload = function(){ new Happierleads.default };
c.parentNode.insertBefore(t, c);
}();
`;
document.body.appendChild(script);
What This Code Does
1. Sets the Client ID Dynamically: You can replace 'YOUR_CLIENT_ID' with a dynamic value (e.g., from your database,
localStorage, or environment).
2. Creates a Script Tag: It builds a new element directly from JavaScript.
3. Injects the Happierleads Loader: This script loads the actual Happierleads tracking library from our CDN.
4. Appends to the Document Body: Finally, it adds the script to your webpage, triggering the tracking script
automatically.
5.
Use Cases
- Single Page Applications (SPAs): When routes change, and you need to re-initiate tracking based on a new context.
- CMS/Builder Platforms: You can inject this script using a code block or embed section without editing the base HTML.
- Dynamic Projects: You might want to track different client IDs depending on user roles or environment (staging vs
production).
This method ensures that you load the latest version (4.0.0) and have full flexibility without manually placing a static
script in your or .
