Quickstart - embedded components

Follow the below steps to implement one of our demo embedded components, for trial and demo purposes. To integrate an embedded component 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 a token :

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

Load in embedded component 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 component 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 component in the centre of the page.

Handle events

Finally, to see the events fired by the embedded component, 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 embedded event stream should now appear in the console like below:

Up next

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