Configuration Options

Configuration reference for the salary calculator widget

All options are optional except for the API key.

Configuration Reference

Option	Type	Default	Description
key	string	required	Your Cadana public API key
selector	string	–	CSS selector of mount element
mount	HTMLElement	–	Pass the element directly (overrides selector)
cssVars	Record<string,string>	–	Override any design token (see Theming)
defaultCountry	string	–	Pre-select country (ISO-3166 alpha-2 or name)
defaultPeriod	string	'monthly'	'monthly' or 'annually'
labels.form	partial object	–	Override form labels (Country / Gross Salary / Calculate)
labels.result	partial 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)

Option	Default	Description
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)

Option	Default	Description
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.