Back to Engine.tech

Embeddable Savings Calculators

Integrate Calculators Into Your Site

Embeddable Calculators are part of the Engine by MoneyLion network, enabling you to entice users to proceed to the next step in their journey with an easy integration and minimal technical requirements, and featuring customizable branding for a consistent user experience.

Here is a demo of the Savings Calculator to see it in action: https://www.moneylion.com/network/moneylion/calculators/demo/web-component/savings-calculator

The Embed Code

​​Engine by MoneyLion will provide a unique Embed code during onboarding, including the following partner and product-specific elements:

  • channel - represents the traffic source name (i.e. your company)

  • zone - represents the app that should be served (e.g. "calculators", "calculators-for-blog-pages" or "calculator-for-homepage")

To integrate the Savings Calculator on your website, you will need to include the following two lines of HTML code. These lines can be placed in any order on the page, and the script can optionally be included within the <head> tag if preferred.

<script type="application/javascript" src="https://www.moneylion.com/network/{channel}/{zone}/web-component/savings-calculator/index.js"></script>
<moneylion-savings-calculator></moneylion-savings-calculator>

Details & Customization

Auto-Sizing

The calculator will be rendered wherever you include the <moneylion-savings-calculator></moneylion-savings-calculator> tag in your page and will responsively scale to fill the space available to it.

Personalized Headings

You may want to accompany the calculator with your own header or instructional text above the embeddable code. For example, this <h1> and <p> produce the screenshot above:

<h1>Blog Entry 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed euismod, nunc id aliquet ullamcorper, nisl nunc tincidunt nunc, et aliquam nunc nunc id lectus.</p>
<script type="application/javascript" src="https://www.moneylion.com/network/{channel}/{zone}/web-component/savings-calculator/index.js"></script>
<moneylion-savings-calculator></moneylion-savings-calculator>

You may customize your headings with marketing language, similar to the following:

<h1>Savings Calculator</h1>
<p>See how your money can grow over time</p>
<script type="application/javascript" src="https://www.moneylion.com/network/{channel}/{zone}/web-component/savings-calculator/index.js"></script>
<moneylion-savings-calculator></moneylion-savings-calculator>

PreviousWelcome!NextHosted Integrations

Last updated