Technical guide

Embed integration

The standard integration creates a responsive Pension Change Campaign iframe from one loader script. Plainly manages approved domains, current and proposed policy references, wording, customer theme and the next-step action behind the supplied identifiers.

Install

<script
  src="https://plainlyfinance.co.uk/embed/plainly-embed.js"
  data-plainly-calculator
  data-calculator="pension-change"
  data-client="your-client-id"
  data-campaign="approved-pension-change"
  data-analytics="dataLayer">
</script>

Managed configuration

Each client identifier controls the approved production and staging domains, brand identity, colour tokens, paid campaign, understanding check and optional next-step call to action. The campaign references a separately validated current and proposed pension-policy configuration. Every accepted change receives a configuration version and is released by Plainly.

The policy configuration can express contribution method, employee range, pensionable-pay basis, employer contribution or matching tiers and a defined share of employer NI savings. It contains organisation-level policy facts, not employee records.

Safe starting defaults

The pension campaign accepts an approved data-campaign. Its policy defaults are supplied by the accepted configuration rather than copied into page markup. The broadersalary-decisions engine also supports approved opening-tool and non-personal assumption attributes where that separate workflow is contracted.

Do not place a real employee's salary or deductions in HTML attributes or the iframe URL. Let the employee enter them after the calculator loads.

User-created share links put calculator assumptions after the URL fragment marker (#). Browsers do not include that fragment in the HTTP request, so the values remain client-side unless the user deliberately shares the link.

The calculator loads immediately by default so it is ready when the host journey appears. Add data-loading="lazy" only when the embed begins well below the visible page.

Browser events

The loader re-emits plainly:calculator-event on the host window. Thedetail object contains:

{
  source: "plainly-embed",
  version: 2,
  clientId: "your-client-id",
  campaignId: "approved-pension-change",
  configurationVersion: "pilot-1.0",
  calculator: "pension-change",
  type: "decision_completed"
}

The pension campaign emits calculator_loaded,calculation_started, advanced_opened,decision_completed, summary_copied,summary_printed, three aggregate understanding categories andcta_clicked. The broader salary-decision engine also supportscalculation_changed,pay_workflow_opened, pension_workflow_opened,decision_summary_opened,advanced_opened, bonus_analysis_viewed,comparison_viewed, offer_comparison_completed,take_home_target_viewed, take_home_target_completed,retirement_target_viewed, retirement_target_completed,pension_funding_viewed, decision_summary_shared,decision_summary_printed, scenario_copied,summary_printed, scenario_reset,confidence_positive_submitted, confidence_neutral_submitted,confidence_negative_submitted,cta_clicked and resize. Interaction events are emitted once per calculator session so repeated input changes do not inflate the pilot funnel. No event contains salary, tax, loan, pension or deduction values.

Set data-analytics="dataLayer" to push the approved events into the host's existing window.dataLayer. Each item contains only the event name, client, campaign and configuration identifiers, calculator name and event-contract version. The customer remains responsible for analytics consent, access and retention controls.

Content security policy

Allow https://plainlyfinance.co.uk in script-src andframe-src. The standard embed does not require third-party cookies, microphone, camera, location or cross-origin storage access.

Acceptance checklist