Call result

When a call with a client ends, to gain the most benefit from it, we expect the manager to perform multiple actions, like linking the call to the proper entity (lead, customer, client, company), creating a new lead or leaving it to the Kommo system to be chosen automatically according to the call logging algorithm. Also we expect them to attach the call recording, and probably would create a task in a specified time.

Gathering all these actions together, in Kommo is called “call result”.

Kommo provides the ability to launch a modal window, and our API manages the adding/choosing entities.

An example of the call result window.

foto

This modal window consists of the following elements:

  1. Window name: Call summary
  2. Linked entity (contact / company)
  3. Lead title
  4. Call recording panel (indicating the duration of the call and the ability to listen)
  5. Time and note for task
  6. Save or Cancel buttons

The following points are considered

  • If the call is outgoing to/incoming from an unknown number, the header will indicate the phone number, and the call binding column will be empty. When editing a contact, a deal will also be created.
  • If the call is from a known number, the call is tied by default according to the call logging algorithm.
  • If the manager presses the <<Cancel>> button after talking with an unknown contact, an incoming lead will be created.

Note: In order to successfully launch a modal window, your widget’s script.js should start with the line

define(['jquery', 'lib/components/base/modal'], function($, Modal){
    /* widget script */
});

Example

Let’s implement a simple call result modal window, with a form to be filled with the call information,  and describe the requests to the API for adding information to the database.

This is a simple implementation without searching for the contact/company or the active lead. In this example we create a new lead and a new contact, connect them together and create a task.

The call result modal window in this example

foto

An example of snippet code from the script.js file

call_result : function () {
	  var data = [];
	  data.push('<style type="text/css" style="display: none">' +
	    'call_result_header {font-size:18px;margin-bottom:25px}'+
	    'input[type="text"] {' +
	      'border: 1px solid #696969;' +
	      'width: 100%'+
	      'border-radius: 3px;' +
	      '-webkit-border-radius: 3px;' +
	      '-moz-border-radius:3px;' +
	      'margin: 2px;' +
	      'padding: 2px' +
	    '}' +
	    'input[type= submit] {' +
	      'background-color: #FFFFFF;' +
	      'border: 1px #008B8B;' +
	      'border-radius: 3px;' +
	      'padding: 3px' +
	      'margin-right: 9px' +
	      'float: left'+
	    '}' +
	    '.close-button {'+
	      'float: right'+
	      'right: 1rem;'+
	      'top: 0.5rem;'+
	      'font-size: 2em;'+
	      'line-height: 1;'+
	      'color: #8a8a8a;'+
	      'border: 1px #008B8B;' +
	      'cursor: pointer;'+
	    '}'+
	    '</style>' +
	    '<form method="post" name="lead_data" id="call_result_data">' +
	    '<h1 class="call_result_header">Call result +1 830 580 3077</h1><br/>' +
	    '<div id="inputs">' +
	    '<input id="contact" type="text" name="contact_name" placeholder="Contact name" />

' +
	    '<input id="lead" type="text" name="lead_name" placeholder="Lead name" />

' +
	    '<input id="lead_note" type="text" name="note" placeholder="Note" />

' +
	    '<label for="lead_task">Task type</label>
' +
	    '<select name="task_type">' +
	    '<option value=1>Follow-up</option>' +
	    '<option value=2>Meeting</option>' +
	    '</select>

' +
	    '<label for="lead_task_text">Add task</label>
' +
	    '<input id="lead_task_text" type="text" name="text" placeholder="Comment in task" />

' +
	    '</div>' +
	    '<input type="submit" value="Save"/>' +
	    '</form>');

	  modal = new Modal({
	    class_name: 'modal-window', init: function ($modal_body) {
	      $modal_body.trigger('modal:loaded') //starts displaying the modal window
		.html(data)
		.trigger('modal:centrify') //configure modal window
		.append('Close');
	    }, destroy: function () {
	    }
	  });

	  $('#call_result_data input[type = "submit"]').click(function (e) {
	      e.preventDefault();
	      var data; //serialization
	      data = $(this).parent('form').serializeArray();
	      setTimeout('$(".modal-body__close").trigger("click")', 1000);
	
	      if (data[1]['value'] != "") {
		var lead_data = [];	      
		lead_data = JSON.stringify([{ 'name': data[1]['value']}]);

		$.post('https://subdomain.kommo.com/api/v4/leads', lead_data, function (response) {
		  var lead_id = response._embedded.leads[0].id;
		 
		  if (lead_id != 0) {
		    if (data[0]['value'] != "") {
		      
		      contact_data = JSON.stringify([{ 'name': data[0]['value']}]);		      
		      
		      $.post('https://subdomain.kommo.com/api/v4/contacts', contact_data, function (response1) {
                        var contact_id = response1._embedded.contacts[0].id;
		     	contact_data = JSON.stringify([{ 'to_entity_id': lead_id, 'to_entity_type': 'leads'}]);
		     	
		     	var link_data= [];
		     	link_data = JSON.stringify([{'to_entity_id': lead_id,'to_entity_type': 'leads'}]);
		        $.post('https://subdomain.kommo.com/api/v4/contacts/' + contact_id + '/link', link_data, function (response2) {
		        }, 'json');
		      }, 'json');
   
		    if (data[3]['value'] != "") {
		    	
		      var task_type =  parseInt(data[3]['value']);    	
		      task_data = JSON.stringify([
			    {
				'task_type_id': task_type,
				'text': data[4]['value'],
				'complete_till': 1665742138,
				'entity_id': lead_id,
				'entity_type': 'leads'
			    }
			]);
		      $.post('https://subdomain.kommo.com/api/v4/tasks', task_data, function (response3) {
		      	 console.log(response3);
		      }, 'json');
		    }
		    }
		  }
		}, 'json');
	      }
	    }
	  );
	}