Skip to main content
All options are optional except for the API key.

​
Configuration Reference

OptionTypeDefaultDescription
keystringrequiredYour Cadana public API key
selectorstring–CSS selector of mount element
mountHTMLElement–Pass the element directly (overrides selector)
cssVarsRecord<string,string>–Override any design token (see Theming)
defaultCountrystring–Pre-select country (ISO-3166 alpha-2 or name)
defaultPeriodstring'monthly''monthly' or 'annually'
labels.formpartial object–Override form labels (Country / Gross Salary / Calculate)
labels.resultpartial object–Override section headings in result view

​
Passing Config

Script tag — use a data-config attribute with a JSON string:
HTML
<script async
  src="https://widgets.cadanapay.com/calculators/salary.js"
  data-config='{"key":"YOUR_PUBLIC_API_KEY","defaultCountry":"CO","defaultPeriod":"monthly","cssVars":{"--cdn-primary":"hsl(15 90% 55%)"}}'>
</script>
JS init — pass an object directly:
JavaScript
window.CadanaCalculator.init({
  key: 'YOUR_PUBLIC_API_KEY',
  selector: '#calculator',
  defaultCountry: 'US',
  defaultPeriod: 'monthly',
  cssVars: {
    '--cdn-primary': 'hsl(15 90% 55%)'
  }
});
The data-config value must be valid JSON.

​
Labels

Customize the text displayed throughout the widget to match your brand voice or localize for different regions.

​
Form Labels (labels.form)

OptionDefaultDescription
country"I want to hire in"Country selection label
grossSalary"Gross Salary"Salary input field label
calculate"Calculate"Calculate button text

​
Result Labels (labels.result)

OptionDefaultDescription
grossSalary"Gross Salary"Gross salary section header
netSalary"Net Salary"Net salary section header
deductions"Deductions"Deductions section header
employerContributions"Employer Contributions"Employer contributions header
totalEmployerCost"Total Employer Cost"Total cost section header
Example:
JavaScript
init({
  key: 'YOUR_PUBLIC_API_KEY',
  labels: {
    form: {
      country: 'Select your country',
      calculate: 'Estimate now'
    },
    result: {
      totalEmployerCost: 'All-in Cost',
      deductions: 'Taxes & Fees'
    }
  }
});
Only specify the labels you want to override. Unspecified labels use their default English values.