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:
<iframe src="https://YOUR-PAGE'S-FULL-URL" width="300" height="300" frameBorder="0"></iframe>
Points to consider before using an iframe
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.
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
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.
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 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:
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