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… |
