Using GET Parameters from a Link Inside a Custom Screen

1. Passing the Original Link

In order to use GET parameters from a link inside a custom screen, we pass the original link to your <iframe>.
This works whether the iframe is embedded as HTML content or by an external link — access to the original link will always be available.

2. Passing `incomeUserData`

In the iframe, we pass an object called incomeUserData that contains technical user data and the original link.

Example of incomeUserData:

{ "region": "LT", "initialUrl": "https://web.onboarding.online/nzZ2aHLkFM4h2u7JXP_z?isPremium=yes", "userIp": "78.62.132.104", "city": "Vilnius", "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36", "cityLatLong": "54.687155,25.279651", "currency": "eur" }

3. Accessing Data Inside the iframe

Inside the iframe, this data is placed in the object:

window.onboardingOnlineCustomScreenData = { inputs: {}, labels: {}, userData: {}, customData: {}, incomeUserData: {} // object with the data will be stored here };

4. Example: Getting a GET Parameter

For example, to show the value of the isPremium parameter from initialUrl in an alert:

function alertSearchParameter() { if (!window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl) { return; } const url = new URL(window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl); const params = new URLSearchParams(url.search); alert(params.get('isPremium')); }

5. Getting Data on Initialization

We send data to the iframe via the InitCustomScreen event.
To receive and store them in the container:

window.onmessage = (event) => { if (typeof event.data === 'object' && event.data.eventName === 'InitCustomScreen') { window.onboardingOnlineCustomScreenData.inputs = event.data.args.inputs; window.onboardingOnlineCustomScreenData.labels = event.data.args.labels; window.onboardingOnlineCustomScreenData.userData = event.data.args.userData; window.onboardingOnlineCustomScreenData.customData = event.data.args.customData; window.onboardingOnlineCustomScreenData.incomeUserData = event.data.args.incomeUserData; alertSearchParameter(); // example function call } };

6. Short Algorithm

Wait for the InitCustomScreen event from the parent.
Save incomeUserData into window.onboardingOnlineCustomScreenData.
Extract initialUrl.
Parse the URL using URL and URLSearchParams.
Retrieve the required GET parameter.

7. Full Example

<html> <head> <meta charSet='UTF-8'/> <title>Some custom screen</title> <!-- OO-PORT-MESSAGE-HANDLER-START --> <!-- DO NOT REMOVE THIS CODE --> <script> window.onboardingOnlineCustomScreenData = { inputs: {}, labels: {}, userData: {}, customData: {}, incomeUserData: {} }; window.nextScreen = () => {}; window.backScreen = () => {}; window.acceptCookie = () => {}; window.declineCookie = () => {}; function alertSearchParameter() { if (!window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl) { return; } const url = new URL(window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl); const params = new URLSearchParams(url.search); alert(params.get('isPremium')); } window.onmessage = (event) => { if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') { window.onboardingOnlineCustomScreenData.inputs = event.data.args.inputs; window.onboardingOnlineCustomScreenData.labels = event.data.args.labels; window.onboardingOnlineCustomScreenData.userData = event.data.args.userData; window.onboardingOnlineCustomScreenData.customData = event.data.args.customData; window.onboardingOnlineCustomScreenData.incomeUserData = event.data.args.incomeUserData; alertSearchParameter(); const port = event.ports[0]; if (port) { window.nextScreen = (args) => { port.postMessage({ eventName: 'NextScreen', args }, []); }; window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); }; window.acceptCookie = () => { port.postMessage({ eventName: 'AcceptCookie', args: null }, []); }; window.declineCookie = () => { port.postMessage({ eventName: 'DeclineCookie', args: null }, []); }; } } }; </script> <!-- OO-PORT-MESSAGE-HANDLER-END --> <style> body { background-color: #ffffff; } #custom-form { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <form id='custom-form'> <button id='submit-button'>Next screen</button> </form> <script> const form = document.getElementById('custom-form'); form.addEventListener('submit', function(event) { event.preventDefault(); window.nextScreen({ someField: 'someValue' }); }); </script> </body> </html>