Skip to main content
The widget dispatches custom events that bubble from the host element, allowing you to integrate with analytics, tracking systems, or your existing JavaScript.

​
Event Reference

All events are dispatched on the widget’s host element and bubble up to document. Use standard addEventListener() to listen for them.
EventPayloadWhen fired
cdn-calculator:ready{ countries: Country[] }Widget initialized and country data loaded
cdn-calculator:calculate{ country, currency, gross, period }User clicked calculate (before API request)
cdn-calculator:resultResultCalculation completed successfully
cdn-calculator:view{ view: 'form' | 'result' }User switched between form and result views
cdn-calculator:errorApiErrorAPI request failed or validation error

​
Event Details

​
cdn-calculator:ready

Fired when the widget is fully loaded and ready for user interaction.
JavaScript
mount.addEventListener('cdn-calculator:ready', e => {
  console.log('Widget ready with', e.detail.countries.length, 'countries');
});

​
cdn-calculator:calculate

Fired when user submits the form, before making the API request.
JavaScript
mount.addEventListener('cdn-calculator:calculate', e => {
  console.log('Calculating for', e.detail.country.name, 'at', e.detail.gross);
  analytics.track('salary_calculation_started', e.detail);
});

​
cdn-calculator:result

Fired when calculation completes successfully.
JavaScript
mount.addEventListener('cdn-calculator:result', e => {
  console.log('Total employer cost:', e.detail.totalEmployerCost);
});

​
cdn-calculator:view

Fired when user navigates between form and result views.
JavaScript
mount.addEventListener('cdn-calculator:view', e => {
  console.log('User switched to', e.detail.view, 'view');
});

​
cdn-calculator:error

Fired when an error occurs (invalid API key, network issues, etc.).
JavaScript
mount.addEventListener('cdn-calculator:error', e => {
  console.error('Widget error:', e.detail.message);
});

​
Integration Example

Google Analytics 4:
JavaScript
mount.addEventListener('cdn-calculator:result', e => {
  gtag('event', 'salary_calculated', {
    country: e.detail.country.code,
    gross_amount: e.detail.grossAmount.amount,
    employer_cost: e.detail.totalEmployerCost.amount
  });
});

​
Event Payload Structures

​
cdn-calculator:ready

JavaScript
{
  countries: [
    {
      code: "CO",
      name: "Colombia",
      regions: [
        { code: "AMA", name: "Amazonas" },
        { code: "ANT", name: "Antioquia" }
      ]
    }
  ]
}

​
cdn-calculator:calculate

JavaScript
{
  country: {
    code: "CO",
    name: "Colombia"
  },
  currency: {
    code: "COP",
    name: "Colombian Peso"
  },
  gross: 2000000,
  period: "monthly"
}

​
cdn-calculator:result

JavaScript
{
  grossAmount: {
    amount: 200000000,  // in cents
    currency: "COP"
  },
  netAmount: {
    amount: 142824527,
    currency: "COP"
  },
  deductions: [
    {
      name: "Pension Fund",
      isStatutory: true,
      amount: {
        amount: 8000000,
        currency: "COP"
      }
    }
  ],
  employerContributions: [
    {
      name: "Pension Fund",
      isStatutory: true,
      amount: {
        amount: 24000000,
        currency: "COP"
      }
    }
  ],
  totalEmployerCost: {
    amount: 43044000,
    currency: "COP"
  },
  country: {
    code: "CO",
    name: "Colombia"
  }
}

​
cdn-calculator:view

JavaScript
{
  view: "form" | "result"
}

​
cdn-calculator:error

JavaScript
{
  message: "Unable to load calculator. Please ensure your key is valid.",
  status: 401,
  code: "UNAUTHORIZED"
}
All monetary amounts are returned in cents to avoid floating-point precision issues. Divide by 100 to get the actual currency amount.