Step Four

Typeform embeds differ from typical iframe-based form emebds. (Find our iframe quick-start guide here.) Typeform also doesn't allow users to add custom header and footer scripts to the forms they build. In addition to embedding forms on websites, Typeform also offers users the ability to serve forms using a *.typeform.com link (or on custom domains that serve content from the Typeform platform).

These unique features make it a bit challenging to connect Typeform and Confection. However, we outline a few approaches below.

"I'm using an embedded Typeform form on my website."

Because Typeform doesn't allow customers to add custom header and footer scripts to the forms they build, Confection cannot collect Typeform data directly. However, we can use Typeform hidden fields to write Confection UUIDs to form entries. This approach allows Confection customers to link Typeform results (name, email, field data, &c) with Confection session data. This contextual information will allow Confection customers to answer basic questions like, "Where did this form submitter come from? What other pages did the user visit before submitting the form?"

Linking Typeform form data to a Confection UUID will also allow customers to listen to UUIDs in Typeform, query their Confection accounts for complete information associated with those UUIDs, and enrich thrid-party endpoints like ad audiences/campaigns, analytics platforms, and CRMs. For example, a user might monitor Typeform entries. When a new Confection UUID is available, they can query their Confection accounts, return full details for that UUID, and write source data, conversion events, or other historical data to Google Analytics, Meta's CAPI, HubSpot, or a custom application database.

Confection customers can do this using one of our lowcode/nocode connectors at Zapier, Pipedream, Make (Integromat), and Tray.io and/or their account APIs.

To set this up, do the following:

First, in your Typeform account, select the form to which you want to add Confection UUIDs. Then, select "Logic" > "Personalize with data" > "Hidden fields." Add a new hidden field named confection_uuid

For more information on creating hidden fields in Typeform, see this guide.

If you haven't already, click "Share" > "Embed in a web page." Copy the Typeform code and add it to your site. Your embed code will look something like this:

<div data-tf-widget="AbcDEFgh" data-tf-opacity="100" data-tf-iframe-props="title=Form Name" data-tf-transitive-search-params data-tf-medium="snippet" data-tf-hidden="confection_uuid=" style="width:100%;height:500px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Remove this portion of the embed: <script src="//embed.typeform.com/next/embed.js"></script>, and save the page. It's normal for the Typeform form to not appear at this point.

Next, add this code above the embed page's </head> tag:

If you have the form embedded on many pages, you can add the code site wide, above the </head> tag. However, the above code must at least appear in the header of the page or pages on which you've embeded the Typeform.

After your modified embed code and header code are live, you'll begin seeing Confeciton UUIDs in your Typeform results. An example follows:

"I'm serving a Typeform form using a *.typeform.com link (or on a custom domain that serves content from the Typeform platform)."

Just as we do with Acuity Scheduling, we're planning to offer Confection customers a webhook-based approach that will allow them to pull Typeform data into their Confection accounts. This build is in progress. For questions and status updates, email [email protected]

Step Five: Send Confection Data Anywhere

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