This guide explains how to embed a Maileon preferences form inside an iframe and automatically pass key URL parameters to personalise or identify the contact. This is a fairly advanced FAQ topic, we would strongly advise you to discuss this with your web developer or agency before implementing.
What It Does
- Takes contactid, checksum, and mailingid from the URL of the current page
- Inserts those values into a Maileon-hosted preferences page URL
- Replaces placeholders in the iframe's src like [CONTACT|ID] with actual values
- Displays the iframe full-width, with no borders
1. Copy and Paste the Code
Add this full code block into the HTML of your page, preferably inside the <body>
tag:
<style> /* Style the iframe to remove borders and make it fit the page */ #myIframe { border: none; width: 100%; height: 100vh; /* Full viewport height — you can adjust if needed */ display: block; } body, html { margin: 0; padding: 0; } </style> <script> function getURLParams(params) { const urlParams = new URLSearchParams(window.location.search); let result = {}; params.forEach(param => { const value = urlParams.get(param); if (value) result[param] = value; }); return result; } function replacePlaceholdersInIframe(iframeId, paramMappings) { const iframe = document.getElementById(iframeId); if (!iframe) return; const originalSrc = iframe.getAttribute('data-src') || iframe.src; let updatedSrc = originalSrc; const urlParams = getURLParams(Object.values(paramMappings)); for (const [placeholder, paramName] of Object.entries(paramMappings)) { const value = urlParams[paramName] || ''; updatedSrc = updatedSrc.replace(placeholder, encodeURIComponent(value)); } iframe.src = updatedSrc; } window.addEventListener('DOMContentLoaded', () => { replacePlaceholdersInIframe('myIframe', { '[CONTACT|ID]': 'contactid', '[CONTACT|CHECKSUM]': 'checksum', '[CONTACT|MAILINGID]': 'mailingid' }); }); </script> <!-- Styled iframe --> <iframe id="myIframe" data-src="https://maileon-benelux.maileon.de/hp/EsXQWzCZAP8dfW1C8DTf-g/preferences?contactId=[CONTACT|ID]&checksum=[CONTACT|CHECKSUM]" ></iframe>
2. Prepare Your Maileon URL
In the <iframe>
tag, use your Maileon-hosted URL, but replace values with placeholders like so:
https://maileon-benelux.maileon.de/hp/XYZ/preferences?contactId=[CONTACT|ID]&checksum=[CONTACT|CHECKSUM]&mailingid=[MAILING|ID]
You can find the URL in the Pages module when you click 'Copy page URL':
By default this shows the URL with the contactID and checksum, but you can also add:
...if you plan to pass mailingid
as well.
3. Link to Your Page with Parameters
When sending visitors to this page, use a URL like (example!):
https://yourdomain.com/preferences?contactid=12345&checksum=abcde&mailingid=67890
4. Customization Tips
Task | How to do it |
---|---|
Change iframe height | Edit height: 100vh in the CSS (e.g. 800px , 60vh , etc.) |
Add fallback values | Modify the `value = urlParams[paramName] |
Support multiple iframes | Duplicate the replacePlaceholdersInIframe function per ID |
Auto-resize to iframe content | Requires JS on the iframe target page (ask if needed) |