Connections Widget

Suggest Edits

Creating a connections widget

The connections widget can be embedded by clients to create a user journey for connecting one or more bank accounts. The widget can also be used with existing users.

Create a new connections widget by selecting Connections as the widget type

Widget Name is used to identify the widget in our admin portal only, if you create many different widgets under your API business

Business relates to the API Business the client accessing users will be in.

📘

To use an existing user or to access user connections after they are created, the Allows sharing of API users option should be enabled for the business. Clients should be under the same business as the widget.

Widget Status can be either Production or Sandbox - This dictates whether live banks or test banks are accessible to connect to

Authorised Domain is the domain where users will be redirected after the process is complete.

Finish URL is the URL that users will be sent to after completing the connections flow. The domain of this URL must match the Authorised Domain.

Finish Label is the label of the button used to finish the connections flow.

Show add another account button is an option for users to add more than one connection at a time. If this is toggled an Add another account button will appear in the final screen of the flow.

Initialising widget

The connections widget can be used by embedding a code snippet or by using a version hosted by Moneyhub.

Use with existing user

By default, the widget will create a new Moneyhub API user and the connections will be added to that user. To add connections to an existing user, pass in the userId param when initialising the widget.

The user must have been created by a client under the same business with the API User sharing enabled.

Code snippet

Below is an example of how to initialise the widget

<div id="root"></div>
<script src="https://s3.eu-west-1.amazonaws.com/widgets.moneyhub.co.uk/widgets.bundle.js"></script>
<script>
  window.moneyhub.init({
    "elementId": "root",
    "type": "connections",
    "widgetId": "widget-id",
    "params": {
    	"userId": "moneyhub-user-id"
    },
  })
</script>

Hosted

The hosted version can be access via Admin portal widget page by clicking on Preview Widget.

Widget journey completion

Once the connection flow is complete, the widget will navigate to the Finish URL with the following query params:

  • userId - this will be the userId of a newly created user or the userId that was passed in at the widget initialisation.
  • connectionIds[] - a list of connection IDs that were created during the journey.

Example redirect URL

https://www.moneyhub.com/finish?userId=649f19c9e9cbc3e0e442b0e6&connectionIds%5B0%5D=1ffe704d39629a929c8e293880fb449a%3A9c99b0b2-a81f-49ba-8c71-c1316416f454

Accessing created connections

To access users and connections created by the widget, the client using to access the API should be in the same business as the widget. The business should also have Allows sharing of API users enabled so the client can access those users.

Please be aware API users created through widget will not currently appear in the API users list in Admin Portal

Example connection widget journey

The first page is a list of banks the user can select from to connect.

Once the user selects a bank they will be presented with a consent screen.

The user will then be sent to the bank authorisation page. If this is successful they will be presented with a page that lists the connections added. If Show add another account button is toggled for the widget, the user will see Add another account as an option. Otherwise they can click on Finish to redirect to the Finish URL.

Updated 5 months ago