Full Integration Options

The calculator provides multiple integration options to fit your technical expertise and website platform.

Choose Your Integration Method

I am a…	Recommended Approach	Best for
No-code / marketer / CMS user	Copy-paste snippet	WordPress, Wix, Webflow, Squarespace
Front-end engineer	Manual JS initialization • ESM Module	Custom websites, SPAs, advanced theming
React / Vue / Nuxt / Svelte dev	Same as front-end engineer (framework-agnostic)	Modern web apps

Not sure which to choose? Start with the copy-paste snippet - it works everywhere and requires zero coding knowledge.

Copy-paste snippet (zero code)

<!-- The widget replaces this <script> tag -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculator Widget Integration</title>
  </head>
  <body>
    <div style="width:900px">
      <script async src="https://widgets.cadanapay.com/calculators/salary.js?key=YOUR_PUBLIC_API_KEY"></script>
    </div>
  </body>
</html>

Drop it anywhere inside <body> – the widget auto-mounts in place.
Responsive: stretches to the width of its parent container.
All CSS lives in Shadow DOM → no style leakage.

Manual JS initialise (recommended for devs)

For more control over when and where the widget loads, use manual initialization. This approach lets you:

Load the widget inside modals or dynamic content
Pass runtime configuration (country from URL params, custom labels, etc)
Integrate with your existing JavaScript build process

<!-- 1️⃣  Load the library once -->
<script async
        src="https://widgets.cadanapay.com/calculators/salary.js"
        data-autoboot="false"></script>

<!-- 2️⃣  Your mount element -->
<div id="my-calculator"></div>

<!-- 3️⃣  Initialise -->
<script>
  window.CadanaCalculator.init({
    key: 'YOUR_PUBLIC_API_KEY',        // required
    selector: '#my-calculator',        // or pass `mount: element`
    defaultCountry: 'CO',              // ISO-3166 alpha-2
    defaultPeriod: 'monthly',          // 'monthly' | 'annually'
    cssVars: { '--cdn-primary': 'hsl(204 100% 50%)' },
    labels: {
      form:   { calculate: 'Estimate now' },
      result: { totalEmployerCost: 'All-in Cost' }
    }
  });
</script>

📘
Pass the data-autoboot attribute and set it to false to prevent the widget from automatically starting up before you call the init method manually.

ESM Module (for bundlers / build systems)

For modern development workflows, use the ESM import. This approach provides:

Dynamic imports for code splitting
No npm dependencies or build step required
TypeScript-friendly with proper module resolution
Better tree-shaking and bundle optimization
Deployments to environments that prefer ESM modules

// Import and initialize
const  { init }  =  await  import("https://widgets.cadanapay.com/calculators/salary.mjs")

init({
  key: 'YOUR_PUBLIC_API_KEY',
  selector: '#calculator',
  defaultCountry: 'CO',
  defaultPeriod: 'monthly',
  cssVars: {
    '--cdn-primary': 'hsl(204 100% 50%)'
  }
});

📘
The ESM build is identical to the CDN version—same API, same events, same theming options.