Savings Component

This component displays savings information with fully customizable content, card options, and dynamic text.

Default Configuration

Standard savings component with default values.

Loading Savings Component...

Custom Header & Text

Customized header text and subtitle sections with different user name.

Loading Savings Component...

Custom Card Options

Different dollar amounts and savings tiers with custom descriptions.

Loading Savings Component...

Event Demonstration

Click different cards to see events in the browser console.

Live Event Log: Events are displayed below and in the browser console.

• savingsCardChanged - Fired when clicking a card
• savingsChanged - Fired on component updates

Loading Savings Component...

Embed this component

Copy this code to embed the Savings component on your website:

Basic Embed:

<iframe src="https://tools.everlylife.io/savings?embed=true" width="100%" height="400" frameborder="0"></iframe>

Web Component with Custom Props:

<script src="https://tools.everlylife.io/embed.js"></script>
            <everly-savings
              userName="Olivia"
              headerText="See how your money can grow⁵ with our cash value life insurance calculator"
              subtitlePrefix="By saving"
              subtitleMiddle="each month above your "
              subtitleMiddle2="monthly premium, you could build"
              subtitleSuffix="in cash value over {years} years with your {policyAmount} insurance policy.*"
              years={30}
              policyAmount={500000}
              initialSelectedCardIndex={1}
              totalSavings={30711}
              premiumAmount={25.41}
              footerDisclosureText="* These cash value projections are based on specific factors and not guaranteed."
            />

Event Listening Example:

<script>
  document.addEventListener('savingsCardChanged', (event) => {
    console.log('Card changed:', event.detail);
    // Handle card selection change
  });
  
  document.addEventListener('savingsChanged', (event) => {
    console.log('Savings updated:', event.detail);
    // Handle any savings component updates
  });
</script>