> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cadanapay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/tools/calculator/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 HTML theme={null}
<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 JavaScript theme={null}
window.CadanaCalculator.init({
  key: 'YOUR_PUBLIC_API_KEY',
  selector: '#calculator',
  defaultCountry: 'US',
  defaultPeriod: 'monthly',
  cssVars: {
    '--cdn-primary': 'hsl(15 90% 55%)'
  }
});
```

<Note>
  The `data-config` value must be valid JSON.
</Note>

***

## 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 JavaScript theme={null}
init({
  key: 'YOUR_PUBLIC_API_KEY',
  labels: {
    form: {
      country: 'Select your country',
      calculate: 'Estimate now'
    },
    result: {
      totalEmployerCost: 'All-in Cost',
      deductions: 'Taxes & Fees'
    }
  }
});
```

<Note>
  Only specify the labels you want to override. Unspecified labels use their default English values.
</Note>