Configuration Options
The widget accepts various configuration options to customize its behavior, appearance, and functionality. 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. Self-mounts in parent element if embedded in <body> tag |
mount | HTMLElement | – | Pass the element directly (overrides selector). |
cssVars | Record<string,string> | – | Override any design token (see §4) |
defaultCountry | string | – | Pre-select country (ISO-3166 alpha-2 or name) |
defaultPeriod | string | 'monthly' 'annually' | Pre-select pay period |
labels.form | partial object | – | Override Country / Gross Salary / Calculate |
labels.result | partial object | – | Override section headings in result view |
How to pass config based on integration method:
Script tag:
<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>The
data-configobject should be a valid JSON string.
JS init (object):
window.CadanaCalculator.init({
key: 'YOUR_PUBLIC_API_KEY',
selector: '#calculator',
defaultCountry: 'US',
defaultPeriod: 'monthly',
cssVars: {
'--cdn-primary': 'hsl(15 90% 55%)'
}
});Labels Configuration
Customize the text displayed throughout the widget to match your brand voice or localize for different regions.
Form Labels (labels.form)
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)
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:
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 will use their default English values.
Updated 3 days ago
What’s Next