> ## 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.
# Full Integration Options
> Advanced integration methods for the salary calculator widget
The calculator provides multiple integration methods to fit your technical needs.
| Audience | Recommended approach | Best for |
| :----------------------- | :--------------------------------------------------------------------------------- | :-------------------------------------- |
| No-code / CMS user | [Copy-paste snippet](#copy-paste-snippet) | WordPress, Wix, Webflow, Squarespace |
| Front-end engineer | [Manual JS initialization](#manual-js-initialization) or [ESM Module](#esm-module) | Custom websites, SPAs, advanced theming |
| React / Vue / Svelte dev | Same as front-end engineer (framework-agnostic) | Modern web apps |
Not sure which to choose? Start with the [copy-paste snippet](#copy-paste-snippet) — it works everywhere and requires zero coding knowledge.
***
## Copy-Paste Snippet
```html HTML theme={null}
```
* Drop it anywhere inside `` — the widget auto-mounts in place.
* Responsive: stretches to the width of its parent container.
* All CSS lives in Shadow DOM — no style leakage.
***
## Manual JS Initialization
For more control over when and where the widget loads. This approach lets you:
* Load the widget inside modals or dynamic content
* Pass runtime configuration (country from URL params, custom labels, etc.)
* Integrate with your existing JavaScript build process
```html HTML theme={null}
```
Set `data-autoboot="false"` to prevent the widget from starting before you call `init()` manually.
***
## ESM Module
For modern development workflows with bundlers and build systems:
* Dynamic imports for code splitting
* No npm dependencies or build step required
* TypeScript-friendly with proper module resolution
```javascript JavaScript theme={null}
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%)'
}
});
```
The ESM build is identical to the CDN version — same API, same events, same theming options.