npm install @vgip/vonage-dialer-sdkhttps://plnkr.co/edit/TGj0HCbDU6yapgfL
const VonageDialer = require('@vgip/vonage-dialer-sdk');
VonageDialer.init({ debug: true }, (dialer) => { // (optional)
dialer.setOnDialerEvent((event) => {
switch (event.type) {
case 'CALL_START': {
break;
}
case 'CALL_ANSWER': {
break;
}
case 'CALL_END': {
console.log(event.data); // VGIP Call Detail Record
break;
}
default: {
this.debugLog('Unhandled event', event);
}
}
});
});<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vonage.dialer.sdk.js"></script>
</head>
<body>
...
</body>
</html>By default, the script creates a Vonage Dot button and inserts it inside the host page. You can drag and reposition the Dot button everywhere on the page and it will remember its position on reload. The dialer becomes shown when a phone call is started or when the Dot button is clicked.
In order to place the dialer into a designated container on the page, create an HTML element with CSS class .vonage-dialer-container;
<div class='vonage-dialer-container' style='width: 280px; height: 460px; position: relative;'></div>You can extend the dialer with additional behavior, implement contacts autocomplete and add extra settings. Find out how in the Dialer SDK documentation.
