iframe Quick-Start Guide

Start using Confection with your iframe forms with a few simple steps.

Issues? Questions? Feedback? Leave a comment. Already have a Confection account? Skip to step three. New to Confection? Learn more here.

Get Started

Step One

If you haven’t already, create a Confection account. If you already have a Confection account, log in.

Continue to Step 2

Step Two

Click “My Account” (or “Set Up My Account” if you’re accessing your account for the first time). Enter your contact information, the domain(s) on which you want to use Confection, and select one of our two data storage options. Then, click “Save Changes.”

Continue to Step 3

Step Three

Click "Install Confection" (If you're accessing your account for the first time, this will be the default screen.) Next, select "iframe" to download the relevant scripts.

Continue to Step 4

Step Four

The content inside an iframe works independently of the page on which it’s embedded. This creates some security risks, can negatively impact page speed, and presents indexing challenges for search bots. But iframes also minimize script and cookie conflicts. As a result, they’re a go-to solution for cross-domain assets like videos, music players, documents, and especially forms.

iframe-embedded forms create challenges for Confection customers. The content in an iframe and the page on which it’s embedded run on different domains. This means we need to perform a few simple actions to ensure UUIDs and analytics work properly and events fire correctly. We outline these below.

Note, in the following steps, we use the phrases "parent page" and "iframe embed." Here's a visualization of that relationship:

a. Install Confection on Your iframe Embed Source

Each iframe contains a src attribute. For example, https://www.example.com below:

<iframe src="https://www.example.com"></iframe>

They usually won't. But if the domain in your iframe src and your parent page URL match, just add your Confection header code above the iframe embed source's </head> tag. Your code will differ based on your preferences and site settings. However, a generic example follows:

<script>
var confection_url = "https://cable.url.here",
confection_account_id = "12345";
window.addEventListener("ConfectionReady", function () {
confection.setPrivacy("none");
confection.setBannerPosition("none");
confection.analytics = false;
});
</script>

Be sure to replace https://cable.url.here with your cable url and 12345 with your Confection account ID.

Also, note that confection.analytics is set to false. On most sites in most cases, it’s set to true. We set it to false on iframe sources to prevent duplicate reporting and other errors.

In most cases, the domain in your iframe src and your parent page URL will not match. For example, your parent page URL will be your website domain (eg., corporatesite.com) and the iframe src will contain a service URL (eg., mycrm.com, myformhost.com, myvideoservice.com, &c). In these cases, you'll want to add this code above your Confection header code:

The final result will like this. The new portion appears in bold.

<script>
document.cookie = "confection_uuid=" + new URL(window.location.href).searchParams.get('confection_uuid') + "; expires=" + new Date(new Date().setTime(new Date().getTime() + 31536000000)).toUTCString() + "; path=/";
var confection_url = "https://cable.url.here",
confection_account_id = "12345";
window.addEventListener("ConfectionReady", function () {
confection.setPrivacy("none");
confection.setBannerPosition("none");
confection.analytics = false;
});
</script>

Again, be sure to replace https://cable.url.here with your cable url and 12345 with your Confection account ID. In this scenario, confection.analytics will also be set to false.


Next, paste the following code above the iframe embed source's </body> tag:

If character or line limits prevent this, host the script yourself. Copy this script, save it as a JS file (eg., confection.js), and upload it to a server you control. Then, add this above the iframe embed source’s </body> tag:

<script src="https://domain.com/confection.js"></script>

Just replace https://domain.com/confection.js with the link to the file you just uploaded.

b. Add an Event Listener to your Parent Page

If you haven't yet installed Confection on your parent page/site, do so using one of our quick start guides.

If you've already installed Confection, just add the following code to the iframe parent page (that is, the page on which you’ve embedded the iframe). Place it above above the </head> tag and below your Confection header code:

c. Adjust the Name of the src Attribute on the Parent Page

Lastly, wherever the iframe is embedded, replace src with data-confection-src. For example, this:

<iframe src="https://www.example.com"></iframe>

… would become:

<iframe data-confection-src="https://www.example.com"></iframe>

That’s it. You're done.

Your site will now write iframe-based form data to your main Confection UUIDs.


“I have some questions.”

Step Five: Send Confection Data Anywhere

After installing Confection, start sending data to any number of different endpoints.

"I'd like some help with this."

Next Steps

Install & Integrate Elsewhere

Find Other Quick-Start Guides

"I have some questions."

Contact Us

"I want to see this."

Share It

Discussion

Questions or comments about using Confection with iframe? Leave them below.

"Please contact me. I have some questions."

You can also use the chat app in the lower right corner.