Integration & Technical Documentation

Account Creation & Tier Activation

Access to the Plan58 portal and embedding tools is determined by your subscription tier:

• Free Tier: Requires standard email verification to activate your account and access the portal.

• Pro & Growth Tiers: Activation occurs immediately following successful payment processing via Stripe checkout. Upgrades from Free to paid tiers can be executed at any time within the portal.

The Customer Portal

The customer portal is the central hub where you can register your domain, copy the embed code, configure lead routing and adjust calculator appearance to match your website's colour scheme.

To maximize the security of your account and protect your domain settings and webhook configurations, we use a password-less login system called Magic Links.

Because we don't store passwords, your account cannot be compromised by password leaks from other websites.

How to log and register

1. Enter your email: Go to the Plan58 login page and enter the email address associated with your account.

2. Check your inbox: We will instantly send you a secure, single-use authentication link.

3. Click the link: Click the "Sign In to Plan58" button in the email. You will be instantly authenticated and redirected to your dashboard to manage your embeds, domains, and lead routing.

Terms of Service

Upon your first login, you must review and accept the Plan58 Terms of Service before accessing the dashboard. Your acceptance is digitally timestamped and recorded against your user profile.

Select your calculator

Select which calculator you want to embed from the dropdown list inside your Plan58 Customer Portal.

Choose Your Layout Mode and Define Button Colours (Modal and Full Screen modes)

• Inline (Default): Renders directly on the page.

• Modal: Opens in window but keeps your website partially visible.

• Fullscreen Takeover: Fills the whole browser window.

Choose Your Implementation Method

Standard Installation (Inline or Auto-Generated Button)

Best for simple blog posts. If you want Plan58 to generate the button for you, simply add the code to your website's HTML exactly where you want the calculator or button to appear.

Example: Pension Drawdown Calculator:

<script
  src="https://plan58.co.uk/scripts/embed.js"
  data-simulator="pension-drawdown-calculator"
  data-base-url="https://plan58.co.uk"
></script>

Custom Button Targeting (Modal & Full Screen)

If you prefer to use your website's existing, natively styled buttons to trigger the calculator, you no longer need to place the script exactly where the button lives. Instead, assign an ID or Class to your button and reference it in your embed code. You can safely place this embed code anywhere on the page, such as just before the closing </body> tag.

Adjusting 'View Results' Scroll Behaviour For Sticky Website Headers

If your website has a fixed/sticky header, you can enter its height in pixels so the calculator scrolls perfectly into view when view results is clicked. This will add the following data attribute to the embed code, which you can do manually if you wish.

data-scroll-offset="50" 

Advanced Installation / GTM

Best if you use Google Tag Manager, or just want to add the script once to a header template, allowing you to simply show calculators or modal buttons by adding the div below.

Head Script (same for every calculator)

<script src="https://plan58.co.uk/scripts/embed.js" async defer></script>

If using Google Tag Manager, deploy the Head Script as a Custom HTML tag set to fire on 'All Pages".

Div code (different per calculator)

<div class="plan58-embed" 
data-simulator="pension-drawdown-calculator" 
data-base-url="https://plan58.co.uk" 
data-display-mode="modal" 
data-button-text="Open Calculator" 
data-button-color="#ea580c" >
</div>

Responsive Implementation

Do not use height, max-height, or overflow: hidden for the container. To ensure calculators render correctly on mobile devices without double scrollbars, wrap the embed in a responsive container.

<style>
  .p58-calculator-wrapper {
    width: 100%;
    min-height: 600px;
    margin: 0 auto;
  }
</style>

<div class="p58-calculator-wrapper">
   <script
     src="https://plan58.co.uk/scripts/embed.js"
     .......>
   </script>
</div>

Free Tier Embeds

The Free tier is designed for content creators, bloggers, and educational sites. It permits unlimited embeds across 1 verified domain.

• Feature Limitations: Lead capture forms and appearance settings are disabled.

• Plan58 Backlink: Free tier embeds automatically include an attribution link to plan58.co.uk.

Pro & Growth Tier Embeds

Paid tiers remove the Plan58 attribution link, activate lead routing, allow brand customisation and allow you to have multiple active domains.

Plan58 is designed to connect seamlessly with your existing tech stack, whether you use a sophisticated CRM via Zapier/Make.com, prefer email leads, or simply need a custom button to link to your bookings page or contact form.

Email Notifications

Email notifications are set on a per calculator basis. Simply select Email from the Lead Routing settings in the Customer Portal and enter the destination email address.

Custom Call-to-Action

You can also bypass Plan58 forms entirely by replacing the lead capture with a Custom CTA button, redirecting prospects directly to an external booking page (e.g., Calendly) or internal contact form.

Webhook Integration

Capture leads and instantly fire an HTTP POST request to Make.com, Zapier, or a custom CRM endpoint. Plan58 does not store failed payloads or queue retries; ensure your endpoint is active.

Sample JSON payload:

{
  "meta": {
    "calculator_name": "Test Calculator",
    "page_url": "https://example.com/calculator-page",
    "submitted_at": "2026-06-25T13:31:15.3467952+00:00"
  },
  "lead_details": {
    "first_name": "Test",
    "last_name": "User",
    "email": "[email protected]",
    "phone": "01234567890",
    "contact_preference": "email"
  },
  "marketing_data": {
    "utm_source": "test_source",
    "utm_medium": "test_medium",
    "utm_campaign": "test_campaign",
    "utm_term": "test_term",
    "utm_content": "test_content",
    "gclid": "test_gclid_12345",
    "fbclid": "test_fbclid_12345",
    "li_fat_id": "test_lifatid_12345"
  }
}

The Appearance settings allow you to white-label your Plan58 tools so they look like native components of your own website.

General Settings

• Theme Mode: Force the calculator into Light Mode, Dark Mode, or allow it to inherit the end-user's system preference.

• Font Family: Select a standard web-safe font (e.g., Roboto) that closely aligns with your website's typography.

• Card Shadow: Adjust the drop-shadow depth (e.g., Large) of the main calculator container to match your existing UI design language.

• Input Box Style: Define how data-entry fields render (e.g., Solid Background or outlined).

• Internal Padding: Control the spacing of the calculator boundaries (e.g., Standard 1.5rem) to ensure the interface doesn't feel cramped on your webpage.

Colours & Borders

Use exact HEX codes to ensure the calculators perfectly match your brand guidelines.

• Primary / Accent Colour: Dictates the colour of primary call-to-action buttons, active toggles, and visual highlights.

• Page Background Colour: Set this to match the exact background colour of the web page where the widget will be embedded, ensuring a seamless, borderless integration.

• Text / Font Colour: Define the core text colour for maximum readability.

• Border Radius: Control the roundness of the calculator container and input fields (e.g., 12px for modern, rounded corners, or 0px for sharp, corporate edges).

Applying Changes

• Save appearance: Pushes your styling updates live to all existing embeds on your registered domain immediately.

• Reset to default: Reverts all styling back to the standard Plan58 base template.

Other Settings

Choose to show or hide the Calculator Assumptions section which displays the statutory and indicative values the calculator uses.

Before setting up Pro features, all target domains must setup either an FCA regulated or non-regulated profile. 

The type of profile determines the way some features work. For example, FCA registered verified customers can edit the text on CTAs (buttons), whereas non-verified profiles must select from pre-defined text.

FCA Verification

To register as an FCA-regulated firm, you must provide your Firm Reference Number (FRN). Plan58 queries the FCA API directly to verify your firm’s active status. To prevent unauthorised use of your credentials, your profile will not be upgraded to 'FCA Regulated' until you verify a secure email link sent to the official domain associated with your firm on the FCA register.

Unregulated Entities (e.g., Blogs, Portals):

Select the "Unregulated/Educational" profile.

To ensure a robust integration, every account, including Free Tier, is automatically provisioned with one Pro Sandbox Domain.

Sandbox Purpose

Use this isolated environment on your staging or development server to test webhook JSON payloads, lead emails and preview appearance customisations.

It can also be used to test out Pro features before upgrading from the Free tier.

For view a full list of the presets, such as minimum wage or tax thresholds, please visit the Calculator Presets page.