Widget API
Overview
Wealth Access has a library of investor-level and advisor-level widgets that can be embedded in other systems to help streamline your users’ workflows. Each widget is a self-contained component that displays unified data from Wealth Access such as a balance sheet of accounts or a portfolio’s diversifications. By using the Wealth Access Widget API, you can customize your existing user interfaces and enhance the digital experience for both advisors and clients.
Real World Solutions
Integrating Wealth Access Widgets in Online Banking
Using the Wealth Access Widget API, Bank of Oklahoma enhanced their proprietary digital banking platform with more comprehensive services. They integrated the doc vault widget, which allowed clients to securely store and access all their account statements and documents in one place. This not only reduced printing costs and staff effort, but also improved client satisfaction and trust.
How to Get Started
Widget integrations will require development effort from your technical team to implement. Each integration is unique and requires knowledge of how the destination system formats and displays embedded content.
The Wealth team will advise your business team in selecting the appropriate widgets to accomplish your business’ needs and will support your technical teams in validating that widgets render as expected. To provide appropriate technical support, we will require user access to a sandbox within your production environment. We ask that you please allow approximately 4-6 weeks for development and validation efforts.
Process Overview
- API access requires additional licensing with Wealth Access. If it is not already part of your contract, reach out to your Wealth Access Account Manager for pricing information.
- Establish API connection between your firm and Wealth Access – The Wealth Access team will provide your development team with the necessary API keys and credentials.
- Consult with the Wealth Access product and implementation teams to determine the best method of SSO to use for your widget integration. We support OAuth 2 and SAML 2 authentication.
- Determine the appropriate widgets to use for the integration. The lists below show examples of all available investor and advisor level widgets. The Wealth Access product team is also happy to consult with your team to determine the best widgets to achieve your business goals.
- Your firm’s development team will then build the solution utilizing the chosen widgets. Be sure to review the SSO and embed requirements.
- Engage the Wealth Access team to test the integration with sample user data.
Investor Widgets
Accounts
| Widget Key | Description |
| investor-accounts-grid | Displays a table view of a given investor’s accounts and includes account name, account number, balance and account type. |
| investor-accounts-chart | Displays a bar chart of a given investor’s assets and liabilities grouped by account type. |
| investor-networth-trend | Displays an historical trendline for the given investor’s net worth. It can be viewed as one cumulative value or broken out by account. |
| investor-pages-manageaccounts | Displays a full listing of the given investor’s managed and held-away accounts by the financial institution at which they are held. Users can add additional held-away accounts to their portal from this widget. |
Holdings & Diversification
| Widget Key | Description |
| investor-holdings-grid | Displays a table view of a given investor’s holdings and includes holding name, associated account, ticker/symbol, CUSIP, quantity, price and balance. |
| investor-holdings-mp | Displays the current market price (delayed by 15 minutes) for each holding and the percentage/dollar change in the holding’s value at current price vs the last stated price. This widget is part of our Market Pricing module which requires specific licensing to access. |
| investor-diversification | Displays a pie chart of asset diversifications for a given investor’s holdings as compared to their target diversifications (as defined by the advisor). |
Transactions
| Widget Key | Description |
| investor-trading-activity-grid | Displays a table view of a given investor’s trading activity including type/description of trade, associated account, ticker/symbol, CUSIP, amount and date. |
Cash Flow
| Widget Key | Description |
| investor-cashflow-grid | Displays a table view of a given investor’s cash transactions including associated account, transaction description, merchant, category and date. |
| investor-cashflow-charts | Displays a bar chart of a given investor’s income and spending cash flow activities grouped by transaction category. |
| investor-cashflow-trend | Displays a bar chart comparing a given investor’s total income and spending for a selected time period. Users can change the view to display income details or spending details, which breaks each total out by cash flow category. |
Tax Lots & Gain/Loss
| Widget Key | Description |
| investor-taxlots-grids | Displays a table view of a given investor’s taxlots for both realized and unrealized gains/losses. and includes information like quantity, price, cost basis, term, current balance, open date and close date. |
| investor-taxlots-summary | Displays a summary comparison of current value and cost basis for all a given investor’s taxlots for both realized and unrealized gains/losses. |
Balance Sheet
| Widget Key | Description |
| investor-balancesheet-grid | Displays a table view of a given investor’s balance sheet with assets and liabilities grouped by account type, and includes each grouping’s dollar value and the percentage of the investor’s total portfolio it represents. |
| investor-balancesheet-chart | Displays a bar chart of a given investor’s balance sheet with assets and liabilities grouped by type, and includes the percentage of the investor’s total portfolio each grouping represents. |
Financial Planning
| Widget Key | Description |
| investor-mgp-meter | This graph is provided directly from MoneyGuidePro. It displays the confidence meter from MPG for a given investor. |
Document Vault
| Widget Key | Description |
| investor-pages-document-vault | Displays the full document vault interface for a given investor, allowing them to find and open existing files or upload a new file to their personal storage area. |
Other
| Widget Key | Description |
| investor-pfs | Displays a table view of a given investor’s accounts in a balance sheet format. Each account is represented as either an asset or liability and grouped according to the account type. |
| investor-ticker | Displays the biggest daily changes in holding values for a given investor. |
| investor-quicklinks | Displays the list of links configured by the advisor to be visible on a given investor’s dashboard. |
| investor-pages-reports | Displays a list of pre-defined reports that the given investor can run. Users can also create a new custom report through this widget. |
| investor-pages-financial-team | Displays the profile picture and contact information for the advisor(s) assigned to the given investor. Investors can add new team members and manage each advisor’s access to his/her portal and held-away accounts from this widget. |
| investor-alerts-list | Displays a list of unread notifications for the given investor. |
Advisor Widgets
Clients
| Widget Key | Description |
| advisors-client-grid | Displays a table view of a given advisor’s clients and households with username, value and percentage of managed accounts, and date of last login. |
| advisor-prospects | Displays a table view of a given advisor’s prospects and the information regarding their status in the onboarding process and account setup. |
Accounts
| Widget Key | Description |
| advisor-accounts-grid | Displays a table view of all accounts held by a given advisor’s clients and includes information like account name, account number, account type, balance, and last update date. |
| advisor-historical-aum | Displays a line graph comparing the historical values of a given advisor’s managed assets vs non-managed external assets. |
Holdings & Diversification
| Widget Key | Description |
| advisor-holdings-grid | Displays a table view of all holdings within a given advisor’s book of business and includes holding name, ticker/symbol, CUSIP, balance, percentage of managed assets, and the number of clients it is held by. |
| advisor-diversification | Displays a donut graph of the current allocation of a given advisor’s book of business. |
Balance Sheet
| Widget Key | Description |
| advisor-balancesheet-grid | Displays a table view of the balance sheet for a given advisor’s book of business, categorizing assets and liabilities by account type. |
| advisor-balancesheet-chart | Displays a bar graph view of the balance sheet for a given advisor’s book of business, categorizing assets and liabilities by account type. |
Document Vault
| Widget Key | Description |
| advisor-vault-recent | Displays a list of documents uploaded by a given advisor’s clients during the selected time period and includes document name, folder, and upload date. |
| advisor-vault-docusign | Displays a list of documents that a given advisor has sent for signature via the Wealth Access/Docusign integration. It included document title, name of the client it was sent to, date sent, and current status of signature request. (The advisor must have his/her own Docusign account to establish the integration for this widget to be available.) |
| advisor-pages-document-vault | Allows an advisor to view a selected client’s document vault and view or add documents. (Advisors do not currently have his/her own vault.) |
Insights
| Widget Key | Description |
| advisor-insights-risks | Displays pre-defined insights to help an advisor identify risks in client usage of the Wealth Access platform, including clients not using aggregation, clients who have not logged in within the past 3 months, and clients who have not accepted their invitation. |
| advisor-insights-opportunities | Displays accounts or transactions that have been flagged as opportunities based on the custom rules an advisor has set. |
| advisor-insights-todo | Allows an advisor to manually create and view a list of todos for his/her book of business. |
Other
| Widget Key | Description |
| advisor-daily-changes | Displays the clients’ change in net worth over a selected time period for a given advisor’s book of business. |
| advisor-client-activity | Displays a list of the 10 most recent client logins and 10 most recent accounts added for a given advisor’s book of business. |
| advisor-content-usage | Displays two bar graphs showing which pages within the Wealth Access platform are visited most and which dashboard widgets are used most by the advisor’s clients. |
| advisor-pages-reports | Allows an advisor to create and view default or custom reports that, when run, are distributed to all investors’ document vaults. |
| advisor-pages-individual-reports | Allows an advisor to create and view reports that, when run, are distributed to the chosen investors’ document vaults. |
SSO Parameters
We support OAuth 2 and SAML 2 for SSO authentication. We recommend consulting with the Wealth Access product and implementation teams to determine which strategy is best for your widget integration. We also have a sample SSO method that you can use for testing.
Widgets are separated out by user type. When calling the javascript method, notice that the namespace is different depending on the current user.
#!javascript
//for advisor
wa.advisor.initApi(string ssoMethod, object ssoParameters);
//for investor
wa.investor.initApi(string ssoMethod, object ssoParameters);Method Parameters
- ssoMethod: This is the key to tell the javascript method which SSO method to use. Some examples are: sample, oauth, or saml.
- ssoParameters: Each SSO method takes different parameters to authenticate; whatever parameters are required for the previously defined SSO method get passed through here in an object.
Example: This is an example to connect our sample SSO. The first parameter tells the function to connect using our “sample” SSO method and the second is the model that the Sample SSO method requires.
#!javascript
wa.investor.initApi("sample", {
token: "test_advisor_token"
});Embed Requirements
To render your chosen widgets, you’ll call the following javascript method. Notice how the namespace is different depending on the current user.
#!javascript
//for advisor
wa.advisor.renderWidget(string key, domNode);
//for investor
wa.investor.renderWidget(string key, domNode);Method Parameters
- key: Each widget has a unique key which can be found above in the list of available widgets.
- domNode: Can be css selector, dom Node, jQuery node. These would all do the same thing:
- wa.investor.renderWidget(key, “#widget”);
- wa.investor.renderWidget(key, $(“#widget”));
- wa.investor.renderWidget(key, document.getElementById(“widget”));
Example: Here is an example of rendering two widgets to two dom nodes.
html
<div id="BalanceSheet"></div>
<div id="Diversification"></div>javascript
#!javascript
wa.investor.renderWidget('investor-balancesheet-grid', '#BalanceSheet');
wa.investor.renderWidget('investor-diversification', '#Diversification');Wealth Access Resource Files
Our widgets need specific javascript and css files to work properly. They are also dependent on some third party libraries like jquery. We serve these files from our CDN and support multiple ways for you to include our files.
CSS
Our CSS needs to included on any page that uses our widgets. There are two options:
- Include all our CSS – This includes our custom CSS + Bootstrap 3 which we use to style our widgets.
#!html <link href="https://v2.wealthacess.com/styles/Dist/integration.css" rel="stylesheet"> <!-- this is our main css file that needs to be included --> - Include our CSS without Bootstrap – If you’re already using Bootstrap, you can just include our custom styles. Be aware that any changes you have made to Bootstrap default styles could potentially have undesirable effects on our widgets.
#!html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- replace this with your bootstrap that you already use. DO NOT include this actual file. --> <link href="https://v2.wealthaccess.com/styles/Dist/integration-onlywa.css" rel="stylesheet"> <!-- our CSS without bootstrap, this has to be after the bootstrap file. -->
Fonts
We use font-awesome for the iconography included in our widgets. This one is required.
#!html <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
We use Serif-pro in our stylesheet for widget headings. This is optional; if you would like to use that font with our stylesheet simply include this code.
#!html <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700" rel="stylesheet" type="text/css">
Javascript
Our code is separated out by user type: investor or advisor. Depending on which user type is logged in, you will need to include different javascript. Also, please note, to use widgets from our test environment, change the subdomain from v2 to nmock. You will likely need to do this when testing SSO.
Option 1: Use CDN’s
CDNs have performance gains (read why we use them) and we separate our code out from third-party vendors in order to utilize those gains. If you choose to use a CDN, you will need to include this javascript. If you are already including a particular library, you do not need to re-add it here.
#!html
<!--third-party libraries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/6.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1.0/modules/drilldown.js"></script>
<!--our code-->
<script src="https://v2.wealthaccess.com/Scripts/dist/widgets.advisor.bundle.min.js"></script>
Option 2: Use a Single File From Us
This option can be advantageous because of its simplicity.
#!html
<!--our code-->
<script src="https://v2.wealthaccess.com/Scripts/dist/widgets.investor.thirdparty.bundle.min.js"></script>
IE Support
To use our widgets with IE, add this to your document head unless you already have polyfills.
#!html <script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch,Promise"></script>