This article covers the basic information and instructions needed to setup an open CTI environment in Salesforce. Most of the information are available in Salesforce document. The purpose is just to summarize and save reader time to jump through several docs.
- Go to the setup page (right upper coner, click your name, then setup).
- Find or type Call Centers in quick find.
- Hit Import.
- Import the file.
<callCenter>
<section sortOrder="0" name="reqGeneralInfo" label="General Information">
<item sortOrder="0" name="reqInternalName" label="InternalName">My Open Adapter</item>
<item sortOrder="1" name="reqDisplayName" label="Display Name">My Open CTI Call Center</item>
<item sortOrder="2" name="reqAdapterUrl" label="CTI Adapter URL">http://MYSERVER/MySoftPhone.html</item>
<item sortOrder="3" name="reqUseApi" label="Use CTI API">true</item>
<item sortOrder="4" name="reqSoftphoneHeight" label="Softphone Height">300</item>
<item sortOrder="5" name="reqSoftphoneWidth" label="Softphone Width">500</item>
</section>
<section sortOrder="1" name="reqDialingOptions" label="Dialing Options">
<item sortOrder="0" name="reqOutsidePrefix" label="Outside Prefix">9</item>
<item sortOrder="1" name="reqLongDistPrefix" label="Long Distance Prefix">1</item>
<item sortOrder="2" name="reqInternationalPrefix" label="International Prefix">01</item>
</section>
</callCenter>
5. Add yourself as a user by clicking on “Manage Call Center Users” button.
6. Now let’s develop a very easy softphone for your open cti. We want to save it to your url specified above: http://MYSERVER/MySoftPhone.html
<html>
<head>
<!-- Imports Open CTI JavaScript library. It should point to a valid Salesforce domain. -->
<script src="http://YOURURL.TO.salesforce.com/support/api/27.0/interaction.js"></script>
<script type="text/javascript">
// Callback of API method: isInConsole
var isInConsoleCallback = function (response) {
// Returns true if method is executed in Service Cloud console, false otherwise.
if (response.result) {
alert('SoftPhone is in Service Cloud console.');
} else {
alert('SoftPhone is not in Service Cloud console.');
}
};
// Invokes API method: isInConsole
function isInConsole() {
sforce.interaction.isInConsole(isInConsoleCallback);
}
// Callback of API method: getCallCenterSettings
var getCallCenterSettingsCallback = function (response) {
// Result returns call center settings as a JSON string.
if (response.result) {
alert(response.result);
} else {
alert('Error retrieving call center settings ' + response.error);
}
};
// Invokes API method: getCallCenterSettings
function getCallCenterSettings() {
sforce.interaction.cti.getCallCenterSettings(getCallCenterSettingsCallback);
}
// Callback of API method: setSoftphoneHeight
var setSoftphoneHeightCallback = function (response) {
// Returns true if SoftPhone height was set successfully, false otherwise.
if (response.result) {
alert('Setting SoftPhone height to 300px was successful.');
} else {
alert('Setting softphone height failed.');
}
};
// Invokes setSoftphoneHeight API method.
function setSoftphoneHeight() {
sforce.interaction.cti.setSoftphoneHeight(300, setSoftphoneHeightCallback);
}
// Callback of API method: getPageInfo
var getPageInfoCallback = function (response) {
if (response.result) {
alert(response.result);
} else {
alert('Error occured while trying to get page info: ' + response.error);
}
}
// Invokes API method getPageInfo
function getPageInfo() {
sforce.interaction.getPageInfo(getPageInfoCallback);
}
//dial a number
function dial() {
var number = document.getElementById("dialPadText").value;
alert("dialing number: " + number);
}
</script>
</head>
<body>
<input type="text" id="dialPadText"/><button onclick="dial()">dial</button><br/>
<button onclick="isInConsole();">isInConsole</button></br>
<button onclick="getCallCenterSettings();">getCallCenterSettings</button></br>
<button onclick="setSoftphoneHeight();">setSoftphoneHeight(300)</button></br>
<button onclick="getPageInfo();">getPageInfo</button>
</body>
</html>
Now you have your basic open CTI in Salesforce. We'll discuss more about open CIT later.
Do you know where I could find the HTML for a fully featured softphone, including keypad ?
ReplyDeleteHTML is visible to anyone. Just go to the apex exchange and install any of package you like, you should be able to see the HTML and borrow the ideas.
DeleteBut I don't think any verdor will open source their softphone code, the javascript and server side code can be quite complex to build.
Hi , I am new to Open CTI, can u pls let me know how to handle calls made to my VoIP phone, basically i want a pop up window displaying the name and other details of the person calling.
ReplyDeleteThanks in advance
I have created Call center definition file and created a HTML also.
ReplyDeleteCan you please tell me How can I integrate CTI system with Salesforce.?
How will CTI system make a call to Salesforce when a cutomer made a call?
I am not able to Integrate CTI system will Salesforce. Please help me.
The open cti is your own iframe (you own the code). Typically when a phone call comes in, you'll have your telephony system send a message to that iframe. A popular approach is to send a post message via javascript/html5.
ReplyDeleteHi,
ReplyDeleteI tried the same thing, but instead of showing buttons in iframe its showing just plain blue screen.
Note: I tried URL manually opening in browser and its opening but buttons not working as expected.
Please suggest.
Thanks,
Arpit
It was the same for me with Firefox and Chrome, but somehow works with IE11
Delete