この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

Open CTI を使用したサンプル HTML ページ

Open CTI の実装はそれぞれ外観が異なります。この例では、HTML ページを使用して CTI 機能を Salesforce ユーザインターフェースに追加する方法を示します。

この例では、Salesforce 組織にコールセンター定義ファイルをすでにインポートしたことを前提としています。このサンプルの HTML ページは、Salesforce 上に Visualforce ページとして保存することも、サードパーティドメイン上に保存することもできます。

HTML ページを作成します。

次のサンプルコードを切り取って HTML ページに貼り付けます。

このコードは、Open CTI の各種関数を示しています。

Lightning Experience で電話をかけるには、まず Lightning アプリケーションを作成し、Open CTI ソフトフォンユーティリティを追加する必要があります。

メモ

Salesforce Classic のサンプルコード

1<html>
2<head>
3      <!-- Imports Open CTI JavaScript library. Point to a valid Salesforce domain. -->
4      <script src="https://domain:port/support/api/52.0/interaction.js"></script>
5      <script type="text/javascript">
6             // Callback of API method: isInConsole
7             var isInConsoleCallback = function (response) {
8                  // Returns true if method is executed in Salesforce console, false otherwise.
9                  if (response.result) {
10                      alert('Softphone is in Salesforce console.');
11                  } 
12                  else {
13                      alert('Softphone is not in Salesforce console.');
14                  }
15              };
16              // Invokes API method: isInConsole
17              function isInConsole() {
18                       sforce.interaction.isInConsole(isInConsoleCallback);
19              }
20              // Callback of API method: getCallCenterSettings
21              var getCallCenterSettingsCallback = function (response) {
22                     // Result returns call center settings as a JSON string.
23                     if (response.result) {
24                            alert(response.result);
25                     } 
26                     else {
27                            alert('Error retrieving call center settings ' + response.error);
28                     }
29              };
30              // Invokes API method: getCallCenterSettings
31              function getCallCenterSettings() {
32                       sforce.interaction.cti.getCallCenterSettings(getCallCenterSettingsCallback);
33              }
34              // Callback of API method: setSoftphoneHeight
35              var setSoftphoneHeightCallback = function (response) {
36                       // Returns true if SoftPhone height was set successfully, false otherwise.
37                      if (response.result) {
38                          alert('Setting softphone height to 300px was successful.');
39                      } 
40                      else {
41                         alert('Setting softphone height failed.');
42                     }
43               };
44               // Invokes setSoftphoneHeight API method.
45               function setSoftphoneHeight() {
46                       sforce.interaction.cti.setSoftphoneHeight(300, setSoftphoneHeightCallback);
47               }
48               // Callback of API method: getPageInfo
49               var getPageInfoCallback = function (response) {
50                      if (response.result) {
51                             alert(response.result);
52                      } 
53                      else {
54                             alert('Error occured while trying to get page info: ' + response.error);
55                      }
56               }
57               // Invokes API method getPageInfo
58               function getPageInfo() {
59                       sforce.interaction.getPageInfo(getPageInfoCallback);
60               }
61      </script>
62</head>
63<body>
64      <button onclick="isInConsole();">isInConsole</button><br/>
65      <button onclick="getCallCenterSettings();">getCallCenterSettings</button><br/>
66      <button onclick="setSoftphoneHeight();">setSoftphoneHeight(300)</button><br/>
67      <button onclick="getPageInfo();">getPageInfo</button>
68</body>
69</html>

Lightning Experience のサンプルコード

1<apex:page >
2  <!-- Begin Default Content -->
3  <h1>Congratulations!</h1>
4  This is your sample page.
5  <!-- End Default Content -->
6<html>
7<head>
8   <!-- Imports Open CTI JavaScript library. Point to a valid Salesforce domain.
9-->
10   <script src="https://domain:port/support/api/52.0/lightning/opencti_min.js"></script>
11   <script type="text/javascript">
12      // Callback of API method: setSoftphonePanelHeight
13      var setSoftphonePanelHeightCallback = function(response) {
14            // Returns true if setSoftphonePanelHeight method is executed successfully, false otherwise
15            if (response.result) {
16               alert('setSoftphonePanelHeight is successfully executed.');
17            } 
18            else {
19               alert('setSoftphonePanelHeight failed.);
20            }
21      };
22      // Invokes API method: setSoftphonePanelHeight
23      function setSoftphonePanelHeight() {
24         sforce.opencti.setSoftphonePanelHeight({
25            heightPX: 500,
26            callback: setSoftphonePanelHeightCallback
27         });
28      }
29      // Callback of API method: setSoftphonePanelWidth
30      var setSoftphonePanelWidthCallback = function(response) {
31            // Returns true if setSoftphonePanelWidth method is executed successfully, false otherwise
32            if (response.result) {
33               alert('setSoftphonePanelWidth is successfully executed.');
34            } 
35            else {
36               alert('setSoftphonePanelWidth failed.');
37            }
38      };
39      // Invokes API method: setSoftphonePanelWidth
40      function setSoftphonePanelWidth() {
41         sforce.opencti.setSoftphonePanelWidth({
42            widthPX: 500,
43            callback: setSoftphonePanelHeightCallback
44         });
45      }
46      // Callback of API method: setSoftphoneItemIcon
47      var setSoftphoneItemIconCallback = function(response) {
48            // Returns true if setSoftphoneItemIcon method is executed successfully, false otherwise
49            if (response.result) {
50               alert('setSoftphoneItemIcon is successfully executed.');
51            } 
52            else {
53               alert('setSoftphoneItemIcon failed.');
54            }
55      };
56      // Invokes API method: setSoftphoneItemIcon
57      function setSoftphoneItemIcon() {
58         sforce.opencti.setSoftphoneItemIcon({
59            key: 'call',
60            callback: setSoftphoneItemIconCallback
61         });
62      }
63      // Callback of API method: setSoftphoneItemLabel
64      var setSoftphoneItemLabelCallback = function(response) {
65            // Returns true if setSoftphoneItemLabel method is executed successfully, false otherwise
66            if (response.result) {
67               alert('setSoftphoneItemLabel is successfully executed.');
68            } 
69            else {
70               alert('setSoftphoneItemLabel failed.');
71            }
72      };
73      // Invokes API method: setSoftphoneItemLabel
74      function setSoftphoneItemLabel() {
75         sforce.opencti.setSoftphoneItemLabel({
76            Label: 'MySoftphone',
77            callback: setSoftphoneItemLabelCallback
78         });
79      }
80   </script>
81</head>
82<body>
83   <button onclick="setSoftphonePanelHeight();">setSoftphonePanelHeight({heightPX:500})</button><br/>
84   <button onclick="setSoftphonePanelWidth();">setSoftphonePanelWidth({widthPX:500})</button><br/>
85   <button onclick="setSoftphoneItemIcon();">setSoftphoneItemIcon({key:'call'})</button><br/>
86   <button onclick="setSoftphoneItemLabel();">setSoftphoneItemLabel({label:'MySoftphone'})</button>
87</body>
88</html>
89</apex:page>

HTML ページを作成した後、コールセンター定義ファイルに URL を追加します。ソフトフォンは、ユーザインターフェースによって表示位置が異なります。

Salesforce Classic の場合は、ページの左側に表示されます。
Salesforce Classic コンソールアプリケーションの場合は、フッターに表示されます。
Lightning Experience の場合は、フッターに表示されます。

Salesforce Classic でのサンプル HTML ページの出力

Salesforce Classic コンソールアプリケーションでのサンプル HTML ページの出力

Service Cloud コンソールでのソフトフォンとしてのサンプル HTML ページの出力

Lightning Experience アプリケーションでのサンプル HTML ページの出力

Lightning Experience アプリケーションでの HTML サンプルのスクリーンショット。

Open CTI 開発者ガイド

Open CTI を使用したサンプル HTML ページ

関連項目: