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.

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 .