Widgets Overview

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://widgets.moneyhub.co.uk/widgets.bundle.js"></script>
     <script>window.moneyhub.init({
         "elementId":"root",
         "type":"affordability",
         "widgetId":"defccf60-648e-41f2-9e2b-648010589956",
         "params":{
           "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.

If you wish to listen for events that occur in the widget for your own logging purposes, simply pass in a logger object that includes a function called info and/or a function called error, depending on which levels of event you wish to listen for. The first argument passed into it from the widget will be the name of the widget page where the event has occurred, and the second will be a data object containing whatever useful information has been passed for that event. See the example below:

<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://widgets.moneyhub.co.uk/widgets.bundle.js"></script>
     <script>window.moneyhub.init({
       "elementId":"root",
       "type":"affordability",
       "widgetId":"defccf60-648e-41f2-9e2b-648010589956",
       "params":{
         "externalUserId":"external-user-id",
         "email":"[email protected]",
         "name":"Custom name"
        },
        "logger": {
          "info": (page, data) => console.info(page, data), // Replace with however you wish to handle these events
          "error": (page, data) => console.error(page, data), // Replace with however you wish to handle these events
        }  
      })
    </script>
  </body>
</html>