Sample HTML Page Using Open CTI

Each implementation of Open CTI can look different. This example shows you how to add CTI functionality to the Salesforce user interface using an HTML page.

This example assumes that you’ve already imported a call center definition file into your Salesforce org. The sample HTML page can be stored on Salesforce as a Visualforce page or on a third-party domain.

Create an HTML page.
Cut and paste the following sample code into your HTML page.

This code demonstrates various functions of Open CTI. Keep in mind that to make calls in Lightning Experience, you must first create a Lightning app and add the Open CTI Softphone utility.

");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"96ZND-LJLSH-JXHC9-F8GQP-6WCGS";var o=document.currentScript||document.getElementsByTagName("script")[0],i=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!i)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),o.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="eyab6kadmwalajqacqemiaaacfvdfhci-f-58b20d6af-clienttons-s.akamaihd.net",o="false"=="true"?2:1,i={"ak.v":"41","ak.cp":"1836958","ak.ai":parseInt("1224868",10),"ak.ol":"0","ak.cr":1,"ak.ipv":6,"ak.proto":"h2","ak.rid":"94b0e100","ak.r":41279,"ak.a2":n,"ak.m":"","ak.n":"essl","ak.cport":35252,"ak.gh":"23.218.223.89","ak.quicv":"","ak.tlsv":"tls1.3","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"","ak.t":"1781701704","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==V+zCoc5CxWPIsEPPYriG8iNPLkFblfWYV10KyiyzAt7NIdHlwMp+UmUqF9moCBukdpyKooVLexVsTeuyXdUdvQP/p0yVm4N/y2xJIPuqvA9KydS80Haagog5DTSlTz6er99UPPGFuEWHWf0T189jzkHpAbg5M8vXeFqasaMK01m2EGCwe9pUtsAvZbigZY/5hHtneuuZdkFutkaMv73X2T3ZTYrs/Ii2tcqoPyjed6yo2SpSYDlg/LUPciqkHtVOMaQJBivvtRKSh1oDUht3GrzVWmZsUrIq1q4NNC7o6BwhnJz+OigCMmFRgaSWRL/OrfQv4WPsthNKpI/2cf6g6w0fAX/3foQORGdWo6HvPkNUHkSqOMprh/jKUre3TTGtBzd6X6TcpH20r0ALHKUiQLurrWC4hTR3hlt5p2JOoEQ=","ak.pv":"88","ak.dpoabenc":"","ak.tf":o};if(""!==t)i["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))i["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(i)},rv:function(){var e=["ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:i,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);

">

After you create the HTML page, add the URL to the call center definition file. The softphone is rendered differently depending on your user interface:

In Salesforce Classic, on the left of the page
In the Salesforce Classic Console App, in a footer
In Lightning Experience, in a footer

output of sample HTML page as a softphone in Salesforce

output of sample HTML page as a softphone in the Service Cloud console

Screen capture of a the HTML sample in a Lightning Experience app.