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:

&mailingid=[CONTACT|MAILINGID]

...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

TaskHow to do it
Change iframe heightEdit height: 100vh in the CSS (e.g. 800px, 60vh, etc.)
Add fallback valuesModify the `value = urlParams[paramName]
Support multiple iframesDuplicate the replacePlaceholdersInIframe function per ID
Auto-resize to iframe contentRequires JS on the iframe target page (ask if needed)