Widgets Overview

Widgets are standalone components that provide self-contained open finance user journeys. They can be used to take a user through an affordability journey, or to make a payment.

We can host widgets or they can be embedded in an existing app or website.

Creating Widgets

You can set up widgets from our admin portal. You'll need to have permissions enabled to be able to view the My Widgets section. If you don't see it then ask just a member of the Moneyhub team.

Hosted Widgets

Widgets are automatically made accessible on the Moneyhub platform. Once created, you'll be able to preview your widget by clicking on the Preview Widget link on the widget detail page. This link can be shared externally.

Self-hosting Widgets

Another option is to host the widgets on your own infrastructure. When creating the widget you'll need to specify the Authorised Domain where you'll be hosting the widget. On the widget detail page you'll be able to get a snippet of code to include in your HTML. The script tag should be placed in the <body> of your page.

<html>
  <head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
     <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":"affordability","widgetId":"defccf60-648e-41f2-9e2b-648010589956","customData":{"externalUserId":"external-user-id","email":"[email protected]","name":"Custom name"}})</script>
  </body>
</html>

The above example shows a simple implementation whereby one of our widgets is initialised directly on page load.

However widgets can be rendered using any JS framework, e.g. React or Angular.


What’s Next