1. Home
  2. page-builder
  3. Page management
  4. Embedding pages in iframes

Embedding pages in iframes

You can embed your pages inside an “iframe” rather than having the entire page hosted by Engaging Networks. An iframe acts like a window to another website. This can be useful if you want to embed a signup form directly in your website’s footer rather than having a button that takes the supporter elsewhere, for example.

You should create a simple HTML template that will look good inside an iframe. You would not want to have logos or menus for this template, and would want something that matches the style of your own website (fonts, background colours and so on) so the iframe fits in seamlessly.

To add an iframe, you can use code similar to this:

<iframe src="https://YOUR-PAGE'S-FULL-URL" width="300" height="300" frameBorder="0"></iframe>

Points to consider before using an iframe

There are some issues that you should consider before using this approach though:
  • Some browsers block cookies inside iframes that are needed for the operation of the Engaging Networks pages, which can stop them working properly. If you haven’t already, we strongly recommend purchasing an SSL certificate for a subdomain of your website that points to our servers. The subdomain will be something like https://action.yourcharity.org. If this is used as the domain of your iframe’s source it can eliminate these issues because the browser then authorises the iframes to use cookies since it is essentially the same domain. But see below for more information on this and some alternative workarounds
  • Iframes won’t get pre-populated from campaign links in emails, since you are sending the supporter to a non-Engaging Networks page. The system also won’t be able to track conversions, so for marketing automations those decision branches won’t get picked up
  • Be sure to match the protocol you use in your iframe’s source URL with your website. They should both be https://. If you use http:// for your main website the iframe will also need to use http://, which means that supporters’ data is not encrypted when it is submitted
  • Iframes do not naturally resize themselves in response to the size of the screen. They have a set width and height, so you need to ensure the iframe will look good on a desktop and on smaller mobile screens
  • Consider adding tracking to your iframe’s source so you know where the submissions have come from
  • Be sure to fully test your website hosting the iframed pages on different browsers and devices before launching
  • Social share buttons on your thank you page may not operate properly inside an iframe.
  • If you are having issues with social sharing click on the toggle bar below to reveal a solution
Click here for social sharing iframe solution

Facebook and Twitter prevent their pages being loaded in iframes, so you will need to force the facebook and twitter share pages to appear in a new tab when you are using an iframe.

Add some javascript like this to a code block on the page where your share buttons are:

<script type="text/javascript">
  $(function(){
    $('.en__shares a').each(function(){
      $(this).attr('target', '_blank');
    });
  });
</script>

Important! Set the share button type to “simple” for this to work, rather than medium or large.

  • If you are redirecting to a thanks page on your site instead of an Engaging Networks thanks page, then it will probably open up the page inside the iframe. If instead you want to the parent page to show the thanks page, add this to your template in between the <head> tags:
    <base target="_parent">

Solving Issues with browsers blocking the operation of pages inside iframes

The use of a subdomain is the recommended way to use iframes with Engaging Networks. However there are some alternative workarounds below:

  • Turn off “Session validation” in your Engaging Networks page which will help single-page petitions and email-to-targets to work properly. However, this can sometimes increase automated “spam” submissions. If so, consider the use of a captcha
  • In the Safari browser on iPhones and iPads, multi-page campaigns will sometimes not work on the supporter’s first visit. For example, if you have the target block on Page 2, or are running a data capture campaign over several pages. This is because the browser is not authorising the iframed page to use cookies. If you keep all form blocks and target blocks on the first page, and use the second for the thank you page only, then they should operate correctly. But multi-page campaigns work when using a subdomain (see above)
Updated on May 29, 2019

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support