Web Component Embedded Softphone

It’s common that you may want to embed our phone in your own application.  Typically the solution involves wrapping the phone page in an iframe.   While this can work there are a lot of steps you have to get right and still some limitations you may encounter that are difficult to impossible to overcome around sizing of the frame and intercepting important events.    Today we are happy to share a solution that solves these problems and provides you with an easy to use solution to build new applications.  Along the way you can always check our github repo for the latest updates.

Component

<html>
<head>  
  <script src="https://app.calltrackingmetrics.com/softphone-component.js"></script>
</head>
<body>
  <ctm-phone></ctm-phone>
</body>
</html>

After that you can subscribe to important events about the phone.

Events

Use events to subscribe to important updates from the phone.  You can use this to adjust your UI or pull in additional data about the incoming or outgoing activity (call, text, or chat)

 

Event Description
resize Sent when the soft phone is requesting to resize. you can subscribe to this event to allow the phone to expand or shrink depending on the content being displayed inside the phone.

event.detail.data:

{width: 350, height: 900}

incoming Sent when the soft phone starts ringing, so an agent can answer the phone. You may use this to ensure the phone is visible to the agent.

event.detail.data:

{ sid: ‘CA…’, from: ‘+1dddddddddd’ }

answered When an agent answers the incoming phone call this event will trigger letting you know which call the agent has answered.

event.detail.data:

{ call: { .. }, callId: 1337}

loaded When the call record is loaded in the agents phone. This event will include full details of the answered call.

event.detail.data:

{ call: { .. }, callId: 1337}

end When the call the agent answered ends this event is triggered.

event.detail.data:

{ callId: 1337}

login When soft phone requires a user login

event.detail.data:

{ }

Methods

The element has methods that allow you to control the phone externally.  You might use these methods to add additional functionality or click to dial type features.

 

Method Description
dial arguments: phoneNumber

make a phone call to the given phoneNumber.  The phoneNumber should be in +E.164 format.

muteCall arguments:

toggle the agents microphone.

answerCall arguments:

answer an incoming phone call.

hangupCall arguments:

hangup a live call.

sendDigit arguments: digit

send a digit from the dial pad to the phone e.g. 1, 2, 3, 4, *, #, etc…

X