Quickstart - PFM Widgets

Follow the below steps to implement one of our demo PFM widgets, for trial and demo purposes. To integrate a widget for production, please follow our full integration guide here: Getting started with PFM Widgets

Get a demo token

We have set up an endpoint which a generates a token for a demo user in our test environment. This token is valid for 2 hours, then you will need to create another. You can call this straight from your browser to get your widget token :

<https://demo-token.vercel.app/token/?tenant=moneyhubdemo>

Load in widget via an iframe

Set up a basic html webpage, containing an iframe element, passing in the below url as the src.

https://client-widgets-test.moneyhub.co.uk/?widget_id=mhcnx&token={ACCESS_TOKEN}

Use the access_token generated above, and make sure to pass in a widget_id, the below example renders our connections widget which has id mhcnx.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body, html {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      div {
        height: 600px; 
        border: 1px solid #ccc; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        border-radius: 20px; 
        overflow: hidden;
      }

      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
	<body>
    <iframe src="<https://client-widgets-test.moneyhub.co.uk/?widget_id=mhcnx&token={ACCESS_TOKEN}>" title="iFrame Example"></iframe>
	</body>
</html>

You should now have successfully rendered our connections widget in the centre of the page.

Handle events

Finally, to see the events fired by the widget, we suggest adding a script with a listener like below to log out the events to the console:

<html>
  <head>
    <style>
      body, html {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      div {
        height: 600px; 
        border: 1px solid #ccc; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        border-radius: 20px; 
        overflow: hidden;
      }

      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
      <div>
        <iframe src="<https://client-widgets-test.moneyhub.co.uk/?widget_id=mhcnx&token={			           ACCESS_TOKEN}>" title="iFrame Example"></iframe>
			</div>	
	</body>
	<script>
    window.addEventListener('message', async function (event) {
      if (event.data?.type === "type: 'MH_WIDGET_EVENT'") {
          console.log('Widget Event:', event.data);
      }
 	 });
  </script>

</html>

The widget event stream should now appear in the console like below:

Up next

Now you have successfully rendered a demo widget, check out our full integration guide: Getting started with PFM Widgets