Auto-resizing embedded Experiences

How to automatically resize embedded Experiences

When Experiences are embedded into an iframe it can be useful to manage its dimensions based on the size of the content at a given moment.

FanKit is the underlying application framework which supports dynamic sizing. In other words, it can have a different height depending on what happens within the Experience.

This makes it difficult for the host page to lock in a fixed size of iframe.

To avoid this issue you can use a simple method to make the parent page automatically resize the embedded Experience when dimensions change.

FanKit sends 'Post Messages' to the parent page with the resized dimensions at every change and with the code below, the parent page will manage them accordingly.

Add the following to your page to handle those messages. Depending on which ID you have put to the iframe embedding FanKit, please change the <Fankit-Iframe-ID> in the code above with it.

// Javascript to be added on the parent page
window.addEventListener('message', (event) => {
	if (
		event &&
		event.data &&
		event.data.height &&
		event.data.identifier === 'FK resize') {
			const iframeEl = document.getElementById('<Fankit-Iframe-ID>');
			if (iframeEl) {
				iframeEl.scrollIntoView({ behavior: "smooth", block: "start" });
			}
		}
	},
	false
);