Skip to main content

Spending Plan Widget

This page gives an overview of the Spending Plan Widget and covers its UI.

The Spending Plan Widget helps end users track their spending throughout the month. End users can set their income, select accounts for the widgets to use, track their recurring expenses, create and manage budgets, view any other spending, and see how much they have left to spend throughout the month.

You can integrate our Spending Plan Widget, our Spending Plan Mini Widget, or use our API to build your own UI based on the spending plan data.

End User Onboarding​

When a user first visits the widget, they’ll see the following onboarding screens.

Spending Plan Widget Onboarding

Spending Plan Overview​

After completing onboarding, end users will see an Overview section that shows their monthly income and spending. When selecting one of those sections, they'll see any associated transactions.

The Overview section also shows how much money the end user has remaining in that month. That number is calculated as follows: estimated income - (recurring expenses + budgets) - additional spending. For example, if a user has an estimated income of $3000, with a planned spending of $1000, and an additional spending of $1500, then their remaining amount would be $500. The info icon also shows this.

Spending Plan Widget Main Screen

Spending Plan Widget Main Screen Spending

Spending Breakdown​

The Spending Breakdown section shows end users their recurring expenses, budgets, and any unplanned spending.

Recurring Expenses​

After selecting Recurring Expenses, end users will see any upcoming transactions. They'll also see whether those transactions have been paid. End users can further manage their expenses and add a new expense from scratch or tag a previous transaction as a recurring expense.

Spending Plan Recurring Expenses

Budgets​

When an end user selects Budgets for the first time, they're prompted to add a budget manually or have one created automatically.

After adding their budgets, they'll see the amount they’ve spent in each budget, the progress of each budget, and each transaction associated within each budget.

Spending Plan Budgets

As end users add budgets, the list of budgets under Spending Breakdown will update to show every budget the user has created.

Other Spending​

After selecting Other Spending, end users will see any spending transactions that aren't recurring or associated with a budget.

Spending Plan Budgets

Settings Gear​

The settings gear lets end users edit the spending accounts and projected income value used within the widget.

Spending Plan Insights​

This widget is associated with the following insights:

  • Spending Plan Category Spending. This insight prompts the user to create a spending limit when spending in a category is disproportionately growing.
  • Spending Plan Created. This insight celebrates the user creating a Spending Plan and also has the option to remind users monthly to continue using Spending Plan.
  • Spending Plan Talk With Someone. This insight suggests to Spending Plan users that they should discuss their plan with someone they trust.
  • Weekly No Spend Days. This insight informs users of the days in the past week where they had $0 in non-essential spending to positively reinforce that behavior. If you're using Spending Plan, the CTA copy for this insight will update to say Visit Spending Plan.
  • Weekly Spending Plan Summary. This insight gives users a weekly summary of their spending plan. It informs them of the percentage of their total spending for a given plan, the number of days remaining in the spending plan period, and how much budgeted spending they have remaining.

To learn more about insights, see Financial Insights.

Mini Spending Plan Widget​

The Mini Spending Plan Widget shows the same content as the Spending Plan Widget.

When embedding this widget, you must use width of 320px to 450px.

A scroll bar will appear at any height if there's more content to view.

On this page