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.

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

HTML

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

1) Create a page template for your iframed pages

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.

We have provided a sample blueprint template that you could use.

2) Ensure the page’s settings are set for iframe use

Enable the iframe setting in your page’s admin settings

3) Use a Base URL for the iframe that is a subdomain of the parent page

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 hosting the iframe page on a subdomain of the parent site, for example action.mycharity.org for the iframe embedded in the mycharity.org parent site.

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

To get this set up if not already done, please contact Support. They can work with you to create an SSL certificate for a subdomain of your website that points to our servers.

4) Iframes aren’t easily pre-populated with the supporter’s information

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 your decision branches won’t get picked up.

5) Only use https://

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 which is not recommended

6) Iframes aren’t naturally responsive

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. Or you can look at a JavaScript solution such as this, but note our caveats here!

7) Use tracking

Consider adding tracking to your iframe’s source so you know where the submissions have come from

8) Social sharing may work differently

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

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:

JS

<script type="text/javascript">
  $(function(){
    $('.en__socialShares 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.

9) Redirecting may work differently

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

HTML

<base target="_parent">

10) Use a Code Block

It is best to use iframes in a code block instead of a text block. iframes embedded in the rich text editor could disable certain functionality in the iframe and a code block does not have this issue.

11) Test!

Be sure to fully test your website hosting the iframed pages on different browsers and devices before launching.

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)