Basic ClickHook Integration.html

gistfile1.txt

<script>
  var submittedForm = dataLayer[dataLayer.length-1]['gtm.element'];

  var apiKey = 'ad82728d7b4c01b7273b46907ef82fe8648c268e05c074ca37fxxxxxx';
  var apiAccessToken = '3f89b57564d6aa0c952de57ad58axxxxxx';
  var splitReferrer = document.referrer.split('/');

  var lead = {
    source: 'cheep insurance',
    anon: {{UID}},
    custom_fields: {}
  };

  var routeWorkflowMap = {};
  var leadKeys = ['street', 'city', 'phone', 'state', 'zip', 'email', 'name', 'company'];
  var invalidKeys = [];
  var replaceKeys = [];

  function assignInputs(key, value) {
    if (!key || !value) return;
    if (invalidKeys.indexOf(key) > -1) return;

    key = key.replace('your-', '').trim();
    value = value.trim();

    replaceKeys.forEach(function(keyPair) {
      if (key === keyPair[0]) {
        key = keyPair[1];
      }
    });

    if (leadKeys.indexOf(key) > -1) {
      lead[key] = value;
      } else {
        lead.custom_fields[key] = value;
      }
  }

  function addToWorkflow(leadId, workflowId, assignedToId) {
    var xhr = new XMLHttpRequest();
    var data = {
      api_key: apiKey,
      api_access_token: apiAccessToken,
      instance: {
        workflow_id: workflowId,
        lead_id: leadId,
        assigned_to_id: assignedToId
      }
    };

    xhr.open('POST', 'https://leads.clickhook.io/api/instances/', true);
    xhr.setRequestHeader('Content_Type', 'application/json');
    xhr.send(JSON.stringify(data));
  }

  function findWorkflowId() {
    var objectKeys = Object.keys(routeWorkflowMap);

    for (var i = 0; i < objectKeys.length; i++) {
      var key = objectKeys[i];

      if (window.location.pathname.indexOf(key) > -1) {
        return routeWorkflowMap[key];
      }
    }
  }

  function createOrUpdateLead() {
    var leadId = localStorage.getItem('leadId');
    var workflowId = findWorkflowId();
    var assignedToId = findAssignedToId();

    var xhr = new XMLHttpRequest();
    var data = {
      api_key: apiKey,
      api_access_token: apiAccessToken,
      lead: lead
    }

    if (leadId) {
      xhr.open('PUT', 'https://leads.clickhook.io/api/leads/' + leadId, true);
    } else {
      xhr.open('POST', 'https://leads.clickhook.io/api/leads/', true);
    }

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && ((xhr.status).toString()[0] === '2')) {
        var response = JSON.parse(xhr.response);

        if (!leadId) {
          var leadId = response.lead.id
          localStorage.setItem('leadId', leadId);
        }

        var workflowIds = response.instances.map(function(instance) {
          return instance.workflow_id;
        });

        if (workflowId && workflowIds.indexOf(workflowId) === -1) {
          addToWorkflow(leadId, workflowId, assignedToId);
        }
      }
    }

    xhr.setRequestHeader('Content_Type', 'application/json');
    xhr.send(JSON.stringify(data));
  }

  Array.prototype.forEach.call(submittedForm.querySelectorAll('input[type="text"]'), function(input) {
    var value = input.value;
    var key = input.name;

    assignInputs(key, value);
  });

  Array.prototype.forEach.call(submittedForm.querySelectorAll('input[type="email"]'), function(input) {
    var value = input.value;
    var key = input.name;

    assignInputs(key, value);
  });

  Array.prototype.forEach.call(submittedForm.querySelectorAll('textArea'), function(input) {
    var value = input.value;
    var key = input.name;

    assignInputs(key, value);
  });

  Array.prototype.forEach.call(submittedForm.querySelectorAll('input[type="number"]'), function(input) {
    var value = input.value;
    var key = input.name;

    assignInputs(key, value);
  });

  Array.prototype.forEach.call(submittedForm.querySelectorAll('select'), function(select) {
    // have to find option label as some options don't have values
    var value = select.value? select.value : select.querySelectorAll('option')[select.selectedIndex].label;
    var key = select.name;

    assignInputs(key, value);
  });

  if (lead.custom_fields.fname && lead.custom_fields.lname) {
    lead.name = lead.custom_fields.fname + ' ' + lead.custom_fields.lname;
    delete lead.custom_fields.fname;
    delete lead.custom_fields.lname;
  }

  if (lead.phone || lead.email) {
    createOrUpdateLead();
  }
</script>