CallRail’s integration with Typeform lets you track your existing forms using our form tracking product. Once the integration is enabled, we’ll capture the contents of each form submission and track your customer journeys, including page views and other interactions like phone calls. You can also be immediately notified about a form submission via email, text, or a phone call. To learn more about form tracking, please view this support article.
Getting Started
To use our integration with Typeform, you will need to have:
- Form tracking enabled on your account.
- You must have your CallRail javascript installed on your website.
- You must have at least one Typeform embedded on your site. Please view this article for instructions on how to embed a Typeform.
Please note: CallRail's Typeform Integration does NOT support multiswap. You will not be able to activate the integration for companies that are included in a multiswap configuration.
There are two steps to set up CallRail’s integration with Typeform. Step one is activating the integration, and step two is installing a function snippet and callback attribute. Both steps are covered in detail below.
Step One: Activating the Integration
- Click the Settings icon on the left navigation bar.
- Choose the company you'd like to integrate with Typeform.
- Click Integrations at the top of the page.
- Select the Typeform integration.
- Click the Authorize button to log into your Typeform account.
You can select all or only a subset of forms. If you choose to track all forms, you will have the option to Automatically select new forms created to ensure new forms are tracked as you create them and install the function snippet and callback attribute.
After you have logged in, you’ll be returned to the integration page and your integration will be in a Pending state. You must select which forms you wish to track. You can select all or only a subset of forms. If you choose to track all forms, you will have the option to Automatically select new forms created to ensure new forms are tracked as you create them and install the custom embed code.
- Please note that if you do not select all forms, you will not have the option to automatically select new forms created. Any new forms that you create and wish to track must be added to your selection on the integration page.
- Once you have chosen your forms, click Activate.
- Add the callback attribute to the Typeform embed for each form you’ve selected and the function snippet to each page where a form appears. For more information, please view the section below. Once the callback attribute and function snippet have been installed, each new submission will be tracked in CallRail.il.
Step Two: Installing CallRail’s embed on yourTypeform
In order to track your Typeforms in CallRail, you will need to install a callback attribute and function snippet. The function snippet must be installed on each page where your forms display and the callback attribute must be inserted into the Typeform embed for each form you wish to track. These codes are available from your integration page when the integration is in an active or Pending state.
The callback attribution, function snippet, and installation instructions can be emailed to another person using the “Send by email” button on the integration page.
The first code snippet is the function snippet. It should be installed on your entire site, or on every page you have a Typeform you want to track. This is similar to the installation of our Javascript snippet.
<script>
function submit({ formId, responseId }) {
CallTrkSwap.typeformSubmit({ formId, responseId });
}
</script>
The second snippet is the callback attribute. It must be copied and pasted into your form embed just before the closing </div> tag:
data-tf-on-submit="submit"
Your existing embed code will look something like this example:
<div data-tf-live="01J1ATFSMF79KH65SAPQY8FTFC"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
The bolded portion of the above code is the Typeform embed ID, which is different for each form and should not be copied and pasted to your real embed code.
After you add the callback attribute, the final embed code will look like this, with the bolded portion being unique for each form:
<div data-tf-live="01J1ATFSMF79KH65SAPQY8FTFC" data-tf-on-submit="submit"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
You must install the callback attribute to each Typeform you wish to track.
How CallRail collects data from Typeform
The function snippet and callback attribute you added to the form embed allows Typeform to send a “callback event” each time a lead submits the form. That callback event allows CallRail to link the form submission to the visitor’s session that was tracked by our JavaScript snippet.
Each tracked form submission will be available on the form submission log and all form reports. You can view the form details, as well as the lead’s visitor tracking details, on the lead’s timeline.
If you have connected any other integrations that send form data (such as HubSpot or Mailchimp), your Typeform leads and submission data will populate there as well.
We do not send any data to Typeform.
Deactivating your Typeform integration
From the Callrail home page:
- Click the Settings icon on the left navigation bar.
- Choose the company where you'd like to deactivate the integration.
- Click Integrations.
- Choose Typeform from the list of integrations.
Select Deactivate Typeform on the right side of the page.
Troubleshooting
If you’re missing submissions from a specific form or forms:
- Ensure that you have selected the form(s) on the integration page or have the Automatically select new forms created setting enabled. If a form is not selected, it will not be tracked, even if the callback attribute is installed.
- Verify that the callback attribute was installed on every Typeform you wish to track. Compare the embed with the sample above, and ensure it matches exactly (other than the example embed ID).
If you’re missing submissions from all forms:
- Check that your Javascript snippet is installed properly. You may need to test each web page individually where you’ve installed the snippet to ensure the code is correctly installed on that page.
- Verify that you have installed the function snippet on your website - either across the entire site or individually on each page where a form appears.
- Make sure the integration is in an active state. If the Manage integrations or Typeform page shows that the integration is in a pending or disabled state, your forms will not be tracked.