Click to call feature for CTI app

Hello Thang,

It depends where you expect those phone numbers to appear, but you could add the ticket_sidebar and user_sidebar locations to your app. You don't add any UI there, you hide the app, but you do perform some logic.

Every time the agent opens a ticket or user, a new instance of your app will be created at that location and the app.registered event will trigger. From there you can retrieve the phone number, from the ticket perspective it's client.get('ticket.requester') and from the user perspective it's client.get('user'). That will return the user and it's identities, in the identities you can look for the phone number(s).

Then you take that phone number and pass it to your top_bar location (or where your CTI integration is located). There's a sample here, where a sidebar gets control over the top_bar. Then you can trigger an action in the top_bar and send over the data (the phone number(s)).

Hi @guided

Thank you for your detailed answer, I just had a lunar new year break and can only comeback with this by today.
 
I have followed your guide, however there're few things which don't work as I expected:

1. The app.register doesn't hit when I open any ticket. It only hits when I click the reload button in the image below. 

client.on('app.registered', function (data) {

});

2. I tried to hide the ticket_bar app but it still take space as above.
3. I expected to get all phone numbers of a requester but the response is only the first direct line number, my request is:

let settings = {
    url: '/api/v2/users/' + id + '.json',
    type:'GET',
    dataType: 'json',
};

client.request(settings).then();

The app.register doesn't hit when I open any ticket. It only hits when I click the reload button in the image below. 

It's a bit tricky; app.registered fires every time a new instance of your app is created (and the framework has been fully loaded). Every time you open a ticket that will be the case. But when you navigate back and forth between already open ticket tabs, then the event won't fire. If you want to catch that event, you can listen to "app.activated".

If it only fires once after reloading the app, then it might not run from the right location? (Maybe just the top_bar or background, but not the ticket_sidebar?)

I tried to hide the ticket_bar app but it still take space as above.

You have to wait for the app.registered event (in the ticket_sidebar location), before you hide the app. Otherwise it might be unreliable. Could that be the case here?

I expected to get all phone numbers of a requester but the response is only the first direct line number, my request is:

You don't have to use the REST API, you can use the Apps Framework API with client.get('ticket.requester').

Or if you want to use the REST API, change your settings variable to:

let settings = {
    url: '/api/v2/users/' + id + '.json?include=identities',
    type:'GET',
    dataType: 'json',
};

Thank you @guided for your detail answer.

It's all working well now