Highlights
Highlights allow your avatar to callout a particular part of the app. Sometimes the avatar moves to the highlighted object. Sometimes the avatar stays in the lower right corner. In both cases the object is highlighted so it stands out to the user.
In order to use highlights start with a rounded box from the left hand menu. Draw an arrow from the rounded box to the dialogue box it should take effect on. Like this:
In that rounded box we'll first type "highlight" followed by a colon and then the item we want to highlight:
highlight: account_balance
This would highlight the Account Balance of the currently selected account. Here's how that looks in Draw.io:
And here's how it looks in the app:
There are many highlight options available. If you want to highlight something that isn't supported reach out the MyBudgetCoach. Odds are we will be able to add support for it in a timely manner.
Menu Highlights
| zoom_link | Highlights the button used to schedule a Zoom call with your coach. |
| budget_name | Highlights the budget’s name. Used to encourage changing the name or accessing the menu. |
| add_account | Highlights the button to add a new account. |
| for_budget_accounts | Highlights the "For Budget" total in the left menu. |
| message_center | Highlights the button used to view the Message Center. |
Account Highlights
| zoom_link | Highlights the button used to schedule a Zoom call with your coach. |
| budget_name | Highlights the budget’s name. Used to encourage changing the name or accessing the menu. |
| add_account | Highlights the button to add a new account. |
| account_balance | Highlights the balance for a specific account or all accounts. Also highlights the mouse over button that expands to show cleared and uncleared balances. |
| import_button | Highlights the button used to import transactions from a bank download. |
| add_new_button | Highlights the button used to add a new transaction manually. |
| filter_button | Highlights the filter button used to filter the transactions list. |
| search_bar | Highlights the search bar. |
| split_toggle_button | Highlights the button used to toggle whether split transactions are expanded or not. |
| more_button | Highlights the more options button on the account page. |
| select_payee | Highlights the blank space the user can click to start adding a payee for a new transaction. Note: only works on new transactions. |
| select_category | Highlights the space used for categorizing a new transaction. Note: only works on new transactions. |
| payment_input | Highlights the payment amount for a new transaction. Note: only works on new transactions. |
| deposit_input | Highlights the deposit amount for a new transaction. Note: only works on new transactions. |
| save_transaction | Highlights the save button for a new transaction. By default this button saves and starts a new transaction. |
| cleared_status_icon | Highlights the cleared/uncleared/reconciled status for a new transaction. Note: only works on new transactions. |
| cleared_status_header | Highlights the cleared/uncleared/reconciled header. |
Budget Highlights
| months_band | Highlights the band used to choose which month(s) to view. |
| calendar_icons | Highlights the calendar icons used to determine how many months should show at a time. Note: the amount of icons is dependent on the browser window size. If the user isn’t seeing options here they may need to make their browser window bigger. |
| budget_header | Highlights the “To Budget” section. |
| budget_table | Highlights the budget table in a broad/general way. |
| category_column | Highlights the category header. |
| budgeted_column | Highlights the budgeted header. |
| spent_column | Highlights the spent header. |
| balance_column | Highlights the balance header. |
| received_column | Highlights the received header. |
| budget_more_button | Highlights the button for additional options on the budget page. |