Full Integration Options

<div style="width:900px">
  <script async src="https://widgets.cadanapay.com/calculators/salary.js?key=YOUR_PUBLIC_API_KEY"></script>
</div>

<!-- 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>

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%)'
  }
});