show specific avatar img for specific queue name on incoming call

[edimondi]

hi there, i like the latest version it looks so nice, i was thinking if i can do like when i receive incoming call i want to show specific avatar image for that specific queue name. Thanks

[InnovateAsterisk]

The caller ID (number) determines the buddy, and the buddy has the link to the picture. But, If you want, you can display your own image in the call answer window in the new answer-crm-space.

https://github.com/InnovateAsterisk/Browser-Phone/blob/3a981407ea32117718b657f05a69618f8de418e7/Phone/phone.js#L7702

Call Answer CRM Space There is an object on the call answer page, that allows you to do your own magic on the inbound call. This can involve calling your own CRM, backends etc.

In index.html, open a script tag with the following:

<script>
var web_hook_on_invite = function(session){
    if(session.data.calldirection == "inbound"){
    
    // Identify your queue somehow
    if(session.remoteIdentity.displayName.indexOf("Sales Queue - ") != -1){
       // Put some HTML in the CRM Space
        $("#line-"+ session.data.line +"-answer-crm-space").html("<img src='/my-own-images/sales-queue.png'>");
    } 
}
</script>

[edimondi]

i tried this but for some reason doesn't work not sure why

[InnovateAsterisk]

Sorry, I should have mentioned - I didn’t actually test my code above.

What’s not working? What error do you get?

[edimondi]

i dont see any error a just copy and paste it in my index.html and changed the queue name and image but there is no error it still uses the avatar images not my images

[InnovateAsterisk]

Yes, the avatar image will still display. This code should display an additional image under the avatar image - I’ll double check the code, there may be a visibility issue, I’ll need to check that

[edimondi]

can we replace avatar image with my images because for example when i have an incoming call from specific business i want to show only the logo for that business so that way i don't have to look at the queue name because sometimes its hard to read the queue name but if i have the image its better. Thanks

[InnovateAsterisk]

I made a mistake with the code above, and the next release will position the CRM Space better.

Try this:

<script>
var web_hook_on_invite = function(session){
    if(session.data.calldirection == "inbound"){
        // Identify your queue somehow
        if(session.remoteIdentity.displayName.indexOf("Sales -") != -1){
            // Put some HTML in the CRM Space
            $("#line-"+ session.data.line +"-answer-crm-space").html("<img src='/my-own-images/sales-queue.png'>");
        }
    }
}
</script>

Also remove the Call Answer Avatar

<style>
    .inCallAvitar{display:none !important;}
    .CallPictureUnderlay{background-image: none !important;}
</style>

[edimondi]

perfect now it works. I have multiple queues, how can i do this so every queue will have its own image and also can i put the image like this :

[InnovateAsterisk]

I’ll put an id on the image.

(also I see a typo in the class name, will also fix that)

[InnovateAsterisk]

can we replace avatar image with my images because for example when i have an incoming call from specific business i want to show only the logo for that business so that way i don't have to look at the queue name because sometimes its hard to read the queue name but if i have the image its better. Thanks

In the last update, the avatar images got updated, they are also random if you don’t assign an image to a buddy/contact.

A simple approach to solving this would be to simply assign an image to the buddy that gets created, and from then on it will be set.

If you want to do this company wide, there isn’t a solution that doesn’t involve some custom scripting. Personally I would include the queue name and whatever details you want in the call headers then use the script to read the sip headers. “X-queue-name” or something like that, then use that to display either a crm image or an avatar. You could host the images in a central location so that all your users can access the same images.

[edimondi]

isn't there a way the avatar to get the image based of the queue name, if not thats ok but more important for now is to have multiple queue its own image , Thanks again you are doing a great job.

[InnovateAsterisk]

Version 0.3.5 I have created 3 new id's for you, that you can use:

$("line-<LineNumber>-in-avatar") // Inbound Call Avatar
$("line-<LineNumber>-out-avatar") // Outbound Call Avatar
$("line-<LineNumber>-session-avatar") // During a Call Avatar

The above HTML and objects are only created and become visible at their respective moments:

• The "-in-avatar" is the object that shows when a call comes in.
• The "-out-avatar" is the object that shows when a call IS dialling out.
• The "-session-avatar" is the object that shows when a call in session (answered).

You set the background-image of these objects only. By default they are set to the buddy image that you assign when you create a buddy. If you have not set one, a random image will be applied. Once set, it cannot be removed via any UI.

A possible solution for you could be:

<script>
var web_hook_on_invite = function(session){
    if(session.data.calldirection == "inbound"){
        var queueImage = "/my-own-images/default-queue.png"
        
        // Identify your queue somehow
        if(session.remoteIdentity.displayName.indexOf("Sales -") != -1){
             queueImage = "/my-own-images/sales-queue.png"
        }

        // Set Avatar Images
        $("#line-"+ session.data.line +"-in-avatar").css("background-image", "url('"+ queueImage +"')");
        $("#line-"+ session.data.line +"-session-avatar").css("background-image", "url('"+ queueImage +"')");
    }
}
</script>

This time, because you are not using the crm-space, you just need to take out the underlay image.

<style>
    .CallPictureUnderlay{background-image: none !important;}
</style>

Note: You have to be able to identify from what queue your customer is calling, or this will not work well

[edimondi]

ok now it shows exactly where i wanted on incoming call but still the avatars is showing on the call list instead of the queue image:

and also i added the else for multiple queue, is it correct :

<script>
var web_hook_on_invite = function(session){
if(session.data.calldirection == "inbound"){
    var queueImage = "queue-img/sales.png"
    
    // Identify your queue somehow
    if(session.remoteIdentity.displayName.indexOf("Sales") != -1){
         queueImage = "queue-img/sales.png"
    }

    else

     // Identify your queue somehow
    if(session.remoteIdentity.displayName.indexOf("Support") != -1){
         queueImage = "queue-img/support.png"
    }


    // Set Avatar Images
    $("#line-"+ session.data.line +"-in-avatar").css("background-image", "url('"+ queueImage +"')");
    $("#line-"+ session.data.line +"-session-avatar").css("background-image", "url('"+ queueImage +"')");
 }
}
</script>

[InnovateAsterisk]

There isn’t really a way for that image to show as a queue, unless you set it, but if it’s off a queue, it would probably be different each call, so it would be tricky. The easiest thing would be to use a more generic image, if you are not a fan of the provided images. /avatars/default.0-8.png