Add page with single scroll

Add Melio products as pages inside your app using an experience that doesn't feel embedded.

Some websites have specific interaction patterns that might make the user experience inconsistant with the Hosted Page experience.
To give the best experience in such cases melio provides a mechanism to have the embedd page dynamically resize based on the content of the page.

Single Scroll embed follows the same steps as in Hosted Page Embed, except that embedding on the front end requires using Melio's embedding SDK

Embed Melio in a pay bills page

Import our embedding sdk (available via a cdn url and an npm package) and call the render function with your code and :

<!DOCTYPE html>
<html>
	<head>
		<script src="https://partners-cdn.melio.com/sdk/embedding-sdk/latest.js" />
		<script type="javascript">
			async function embedMelioIframe() {
			  const token = await fetch('/issue-token-for-melio');
			  const myPartnerName = 'partner name from configuration in step 1';
			  melioEmbedSdk.render({
			    token,
			    partnerName: myPartnerName,
			    sandbox: true,
			    iframeSelector: "#melio-iframe-container"
			  })
			}
		</script>
		<style>
			body,
			html {
				height: 100vh;
				width: 100vw;
			}
			#melio-iframe-container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="melio-iframe-container"></div>
	</body>
</html>

info

If you are unable use our SDK, we have an embedding guide that provides a step by step explanation on how to write your own using just javascript. We also provide a simple helper tool to make it easier for you to make sure all edge cases are covered.

Embed Melio in a pay bills page​

Embed Melio in a pay bills page