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
- Enable the iframe setting in your page’s admin settings
- 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
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.
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:
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