Skip to main content
The calculator provides multiple integration methods to fit your technical needs.
AudienceRecommended approachBest for
No-code / CMS userCopy-paste snippetWordPress, Wix, Webflow, Squarespace
Front-end engineerManual JS initialization or ESM ModuleCustom websites, SPAs, advanced theming
React / Vue / Svelte devSame 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

HTML
<div style="width:900px">
  <script async src="https://widgets.cadanapay.com/calculators/salary.js?key=YOUR_PUBLIC_API_KEY"></script>
</div>
  • 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 Initialization

For more control over when and where the widget loads. 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
HTML
<!-- 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. Initialize -->
<script>
  window.CadanaCalculator.init({
    key: 'YOUR_PUBLIC_API_KEY',
    selector: '#my-calculator',
    defaultCountry: 'CO',
    defaultPeriod: 'monthly',
    cssVars: { '--cdn-primary': 'hsl(204 100% 50%)' },
    labels: {
      form:   { calculate: 'Estimate now' },
      result: { totalEmployerCost: 'All-in Cost' }
    }
  });
</script>
Set data-autoboot="false" to prevent the widget from starting before you call init() manually.

​
ESM Module

For modern development workflows with bundlers and build systems:
  • Dynamic imports for code splitting
  • No npm dependencies or build step required
  • TypeScript-friendly with proper module resolution
JavaScript
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.