Quick Tip: Pass Outbound ID to a Form in an iFrame

[Arne_Manthey]

Introduction

In my recent blog post 'Embed Landing Pages in your First Party Company Page with iFrames' I described a new feature in release 2105 that allows to embed a Landing Page from SAP Marketing Cloud in another web page using an HTML iFrame element.

However this technique has an issue if you also want to pass an outbound ID for personalisation to the embedded Landing Page. The problem is that the content of an iFrame does not automatically inherit any URL parameters of the host page.

In this quick tip I show you a way to overcome that issue.

Solution

As usual I do not provide any warranty for any coding I provide here. Please test and use at own risk.

The solution which worked for me is a very small JavaScript code after the iFrame element:

<iframe id="myiframe" class="smc-form" src="https://mylandingpage.com" width="900px" height="1200px" style="width: 100%; margin: 0 auto;">

</iframe>



<script language="javascript">

    var iframe = document.getElementById('myiframe');

        iframe.src = iframe.src + window.location.search;

</script>

The script gets the iFrame element and then modifies the source of the iFrame with anything that is available in the host URL. Please note that it seems to be necessary to put the script after the iFrame.

There might be more robust or elegant solutions to achieve this but maybe this is a good start.

As an example I have a landing page which lets the user see and modify personal data and subscription preferences:

If you wonder how to achieve that field layout please refer to: Styling Forms – Enable Multi-Column Fields Using Flexbox. In the final web page you will then see the personalisation:

Checking the web inspector shows that the outbound ID had been added to the iFrame source:

Conclusion

With the help of this quick tip you should be able to enable personalisation from a link in an SAP Marketing Cloud email for forms that are embedded in a host web page.