Integration Tutorials /  

Typeform

Typeform

Tracks Typeform form submissions, associating lead details with the website visitor

Contents

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>