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.
To get started you will simply need to include our web component
<script src="https://app.calltrackingmetrics.com/assets/ctm-phone-8730166698c6621863340337868e88ba.js"></script>
Next you can use can embed the phone anywhere on your page with the simple html tag:
<ctm-phone></ctm-phone>
After that you can subscribe to important events about the phone.
| 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. |
| 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. |
| answered | When an agent answers the incoming phone call this event will trigger letting you know which call the agent has answered. |
| end | When the call the agent answered ends this event is triggered. |
