Embed Landing Pages in your First Party Company Page with iFrames

[Arne_Manthey]

Introduction

The landing pages in SAP Marketing Cloud can be easily published (see documentation). However, sometimes you just want to embed a simple form onto your main web page (For example, a newsletter subscription). One solution would be to embed a published landing page with an iFrame in another page, but until recently SAP Marketing Cloud prevented this due to security regulations.

With 2105 we have introduced an allow-list (see Configure Content Repositories) for domains which are considered safe for iFrame embedding. In the following chapter I show you how it works.

Setup and Example

My example scenario is a very simple newsletter subscription form which just shows an email address field and a submit button. This form has to be embedded in the side panel of my Wordpress page.

Form definition

To start with, I have set up a form with the email address field and a hidden subscription field with the 'Pre-Selected' option active:

Landing Page

To be able to publish the form easily I use a landing page with a very simple layout which is also restricted in width to fit in my Wordpress side panel.

Wordpress Side Panel Configuration

After publication of the landing page I entered the landing page link in a custom HTML widget container (see below on the left). Since I did not yet add my domain to the iFrame allowlist my form does not yet show up in the preview of the web page (see also the error message in the JavaScript console at the bottom of the screenshot)

iFrame Allowlist

Below you see the new feature which is included in the app 'Content Repository Configuration' which also lets you define a custom domain for your landing page publication. I added the domain of my main web page here.

Note that it is possible to specify multiple different domains here.

Final Result

Below you see the final view of my web page with the form visible in the right side panel.

Note on Online Test Environments

If you have the idea to test this in one of the numerous online HTML test environments (JSFiddle, CodePen,...) you might need to check for any hidden domains that those tools use. Here is what I found for the two mentioned ones:

• JSFiddle
  
  
  
  • jsfiddle.net
  
  
  • fiddle.jshell.net
  
  
  
  


• Codepen
  
  
  
  • codepen.io
  
  
  • cdpn.io
  
  
  
  

No guarantee on these though - those pages might change their setup in the future.

Conclusion

Now you should be able to embed your landing pages and forms on other web pages on multiple domains.

Please also check this related blog post: Quick Tip: Pass Outbound ID to Form in iFrame