1.0.18 • Published 2 years ago
@almaviacx/twilio-cti v1.0.18
twilio-cti
A javascript library
Projects in this solution:
- twilio-cti
- expose cti part for integration
twilio-cti:
As javascript library (Typescript)
CTI:
- Code sample for crm integration
import { Cti, Method, Channel, TaskType, TaskDirection, MessageStatus } from 'twilio-cti';
// logger
const logger = {
debug: (...args: any[]) => console.log('log', ...args)
};
//Twilio flex cti iframe window
//log messages for debug
const cti = new Cti(document.getElementsByTagName("iframe")[0].contentWindow, logger);
//Start & on success => subscribing to channels events
cti.start(() => {
//channel: AGENT
//listener: function to invoke when receiving messages for the channel
//callback: function result to invoke
cti.subscribe({
channel: Channel.AGENT,
listener: (data) => console.log(data),
callback: (data) => console.log(data, 'SUBSCRIBED')
});
//channel: TASK
//listener: function to invoke when receiving messages for the channel
//callback: function result to invoke
cti.subscribe({
channel: Channel.TASK,
listener: (data) => console.log(data),
callback: (data) => console.log(data, 'SUBSCRIBED')
});
}); cti will also be exposed on window.twilio.cti
- Send messages to cti (outbound call sample)
...
//type: CALL | SMS | WHATSAPP | CHAT
//direction: INBOUND | OUTBOUND | INTERNAL
//attributes: task attributes
const message = {
type: TaskType.CALL,
direction: TaskDirection.OUTBOUND,
attributes: {
from: '+33xxxxxxxxx',
to: '+33yyyyyyyyy'
}
}
//channel: AGENT | TASK
//attributes: task
//callback: function result to invoke
window.twilio.cti.publish({
channel: Channel.TASK,
attributes: message,
callback: (data) => {
console.log('PUBLISH', data.status);
}
});BROWSER CTI:
- Code sample for crm integration as library integration
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/twilio-cti.bundle.min.js"></script>
<script>
$(document).ready(function() {
var logger = {
debug: function() { console.log('log', arguments); }
};
var cti = new twilio.Cti(document.getElementsByTagName("iframe")[0].contentWindow, logger);
cti.start(function() {
cti.subscribe({
channel: Channel.AGENT,
listener: function(data) { console.log(data) },
callback: function(i) { console.log(i, 'SUBSCRIBED') }
});
cti.subscribe({
channel: Channel.TASK,
listener: function(data) { console.log(data) },
callback: function (i) { console.log(i, 'SUBSCRIBED') }
});
});
});
</script>
</head>
<body>
<h1>CRM sample</h1>
<iframe src="https://local-cti.twilio-cti.com" allow="camera;microphone" height="800" width="500" title="Iframe Example">
</iframe>
</body>
</html>