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.”
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.
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.
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
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
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:
*.typeform.comlink (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]
Questions or comments about using Confection with Typeform? Leave them below.
You can also use the chat app in the lower right corner.