Typeform

Contents

• Track Typeform lead form submission

Track Typeform lead form submission

Able tracks submitted Typeform responses, recording visitor details for each response and then retrieving response details from Typeform API to associate customer's email or phone with the visit.

1. Grant Able access to Typeform responses

   → Open Able Dashboard and press ⊕ Add Service Integration button to do the action.

2. Enable polling Typeform API for lead details

   → Open Able Dashboard and press ⊕ Add Service Integration button to do the action.

3. Modify Typeform embed code

   
   

   First, add additional tracking code that sends Typeform response identifiers to Able

   <script>
    function notifyAble({ formId, responseId }) {
     window.uipe('track', 'TypeformSubmit', {
      keys: { client_id: `typeform:res:${responseId}` }
     });
     navigator.sendBeacon('https://orz2mfaekh.execute-api.eu-west-2.amazonaws.com/webhook/%%FUNNEL_MARK%%', JSON.stringify({
      formId, responseId
     }));
    }
   </script>

   
   

   This code must be placed into the page's HTML code next to the Typeform embed code, which ensures that the new notifyAble function is available to Typeform.

   
   

   Then, modify Typeform embed code, adding data-tf-on-submit="notifyAble" attribute to tell Typeform widget to send Form and Response ids to the new tracking code after the form is completed.

   
   

   A complete example:

   <div data-tf-widget="wmJ9Vikh" data-tf-opacity="100"
    data-tf-iframe-props="title=My typeform" data-tf-transitive-search-params
    data-tf-on-submit="notifyAble"
    data-tf-medium="snippet" style="width:100%;height:500px;"></div>
   <script src="https://embed.typeform.com/next/embed.js"></script>
   <script>
    function notifyAble({ formId, responseId }) {
     window.uipe('track', 'TypeformSubmit', {
      keys: { client_id: `typeform:res:${responseId}` }
     });
     navigator.sendBeacon('https://orz2mfaekh.execute-api.eu-west-2.amazonaws.com/webhook/%%FUNNEL_MARK%%', JSON.stringify({
      formId, responseId
     }));
    }
   </script>