Getting Started

The calculator was designed to be easy to integrate into your websites. Simply copy and paste this script tag into your web page.

Quick Start

<!-- The widget replaces this <script> tag -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculator Widget Integration</title>
  </head>
  <body>
    <div style="width:900px">
      <script async src="https://widgets.cadanapay.com/calculators/salary.js?key=YOUR_PUBLIC_API_KEY"></script>
    </div>
  </body>
</html>

What happens next:

The widget automatically loads and replaces the script tag
Users can immediately start calculating salaries for 150+ countries
All styling is isolated with Shadow DOM - no conflicts with your existing CSS

Before you start:

Get your Public API key from your dashboard. app.cadanapay.com
Add your domain to the API key's whitelist to ensure the calculator works on your website.

📘
For security, Cadana enforces domain whitelisting to ensure your embedded calculator only renders on trusted websites you own and control. The widget will display an error message if loaded from an unauthorized domain.

🚧
Use your public Cadana API key in the widget snippet. Your public API key will have the prefix cdpk_.
Never embed a secret or server-side key in client-side code—doing so would expose it to anyone who views your page’s source.

Widget URLs

The calculator widget is available at different URLs depending on your environment:

Production:

https://widgets.cadanapay.com/calculators/salary.js
https://widgets.cadanapay.com/calculators/salary.mjs

Development/Staging:

https://dev-widgets.cadanapay.com/calculators/salary.js
https://dev-widgets.cadanapay.com/calculators/salary.mjs

💡
Use the staging URL for testing and development. The production URL should only be used for live websites.

Try it first: Interactive demo - experiment with themes, config, and settings before implementing. You can copy-paste the generated code directly from the demo to your website.

Need more integration control? See Full Integration Options for advanced integration options.