Skip to content
Public Apollo Super draft documentation
Share
Explore

Super Selection Iframe

The super selection component is a feature provided by Flare that can be embedded into a web app so that employees can choose their superannuation fund.
This document describes how to embed the super selection in your app so that an employee's super choice could be captured on our system. Additionally, the document also describes how the super selection can be accessed by your system via an API for downstream processing (e.g. to send to payroll).
Prerequisites
should be created.
should be created.
Steps
against a profile who will be entering super selection in your web app
Embed the component into a HTML file as shown below
<iframe
src="<flare-url>/super-selection/embed/v1.0/web?token=<token>&success-redirection-url=<redirect-url>"
height="600"
width="1200"
>
</iframe>

In this example,
<flare-url> is either https://sandbox-partner.flarehr.com for Sandbox environment, or https://partner.flarehr.com for Production;
<token> is the token you obtained in step 1;
<redirect-url> is an (optional) address you want the user to be redirected upon successful completion. Make sure to use URI encoding (such as ) to pass your redirection address properly.
3. Upon successful redirection, you can use the API endpoint to retrieve the data and process it.

Advanced usage

1. iFrame resizing
iFrame resizing allows the iFrame’s parent to know how tall it needs to be to ensure the iFrame does not need to scroll. This is useful in improving usability, particularly on mobile devices.
2. Page navigated
This option allows the parent application of the iFrame to know a page has changed. In the example below, we have shown how to scroll the iFrame to the top to ensure the user can always view the content of the iFrame.
3. Completed event
This option allows for the parent application to listen for a completion event. This can replace the need for a redirect URL and can improve usability as a page redirect is not required to understand the step has been completed.
Full example

Snippet to add
<iframe
style="width: 100%; border: none;"
onLoad={onLoadIframe}
id="flareSuperSelection"
src="<flare-url>/super-selection/embed/v1.0/web?token=<token>"
height="600"
width="1000"
>
</iframe>
The snippet below is to be added into the same page where the iFrame is placed. It listens to the various events and updates the parent application as a result of these events as needed.

function onLoadIframe() {
const messageSender = 'flare';
const iframe = document.getElementById('flareSuperSelection');

window.addEventListener(
'message',
(event) => {
const { data } = event;
if (!data || data.sender !== messageSender) {
return;
}
switch (data.type) {
case 'submitSuccess':
break;
case 'contentResized':
iframe.height = data.height >= 0 ? data.height : iframe.height;
iframe.width = data.width >= 0 ? data.width : iframe.width;
break;
case 'pageNavigated':
window.scroll(iframe.offsetLeft, iframe.offsetTop);
break;
default:
break;
}
},
false
);
}

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.