Open ContactPadユーザーインターフェイスのカスタマイズ（UCのみ）

統合プロバイダーの作成

統合プロバイダーの一意の名前を選択します。これは、統合プロバイダが所有するリソースを関連付けるために使用されます。以下のサンプルでは、カスタマイズ・プロバイダとして 'acme' を使用しています。

初期化中にユーザーインターフェイスで有効にする追加機能をUCダイヤラーに伝えます。

注：有効化された機能に対応するハンドラを実装する必要があります。

 VonageDialer.init({
   features: {
     contactsProvider: true,
     openContact: true,
     openActivity: 'acme',
     eventsHistory: true
   }
 }, (dialer) => { /* <-- dialer instance */ });

統合アイコンの設定

VonageDialer.init({}, (dialer) => {
  dialer.registerSvgIcon('acme', 'data:image/svg+xml;base64,PHN… ...zdmc+');
});

ダイヤラーインターフェースにカスタム設定を追加する

Custom Settings

SDKは、ダイヤラーインターフェースのデフォルト設定を追加構成オプションで拡張するメソッドを提供します(サポートされるタイプ: 文字列、ブーリアン、選択)。

dialer.registerCustomSettings('acme', [
  { name: 'autoLog', label: 'Auto Log Telephony Records', type: 'boolean', subtype: 'switch', default: true },
  { name: 'skipInternal', label: 'Skip internal communications', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog', default: true },
  { name: 'skipZeroDuration', label: 'Skip zero duration calls', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog', default: true },
  { name: 'skipNoContact', label: 'Skip if contact not found', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog' },
  { name: 'skipMultipleContacts', label: 'Skip if multiple contacts', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog' }
]);
dialer.getSettings('acme', (settings) => {
  //{"autoLog":true,"skipInternal":true,"skipZeroDuration":false,"skipNoContact":true}
});

ライブ・サンプル

  • 余分な設定値は、ダイヤラによってブラウザのストレージに自動保存され、統合コード (デフォルト値を保持) によって後で使用できるようになります。

連絡先プロバイダー

ダイヤラーインターフェイス内に自分の連絡先を表示する方法。

連絡先オートコンプリート（ダイヤル候補）

独自のデータソースから連絡先を検索するための特別なメソッドを実装します。最初の入力パラメータは、ユーザーがダイヤラー入力コントロールに入力したテキストです（*電話番号または任意のテキストを文字列として指定できます）。2番目のパラメータは、検索が完了したときに結果を返すためのコールバック関数です。コールバック関数は、常に配列型のパラメータ（0個以上の連絡可能な項目を含む）を指定して呼び出す必要があります。UIは検索中に小さなプログレスバーを表示します。

const searchContactables = (query, callback) => {
  // 'query' parameter contains the autocomplete search string
  callback([
   {
     provider: 'acme',
     id: '123',
     label: 'John Smith',
     type: 'contact',
     typeLabel: 'Contact',
     phoneNumber: '+12027621401',
     phoneType: 'Mobile'
   },
   {
     provider: 'acme',
     id: '124',
     label: 'John Smith',
     type: 'lead',
     // 'typeLabel' - optional, for visualization purposes
     phoneNumber: '+12027621401',
     // 'phoneType' - optional, for visualization purposes (home, mobile, office)
   }
  ]);
};

ダイヤラーAPI setOnSearchContactablesにカスタムコンタクト検索メソッドを登録します：

  dialer.setOnSearchContactables(searchContactables);

ライブ・サンプル

インタラクションコンタクトの設定（アクティブ通話画面）

SDKは、視覚化とロギングを目的として、対話イベントに外部コンタクトオブジェクトをアタッチすることができます。 進行中のコール識別子がわかれば ( 交流イベントの申し込み)、統合は相互作用に外部コンタクトを割り当てることができる。

コンタクト可能な相手は、アクティブな通話画面（UCのみ）中に可視化され、また、対話のライフサイクル全体を通してシステムによって運ばれる。

dialer.setOnDialerEvent((event) => {
   switch (event.type) {
     case 'CALL_START': {
       dialer.setInteractionContact(event.data.id, {
         provider: 'acme',
         id: '123',
         label: 'John Smith',
         type: 'contact',
       });
       break;
     }
     case 'CALL_END': {
       console.log(event.data.contact); // <- carries the assigned contact object
       break;
     }
     default: {
       console.log('Unhandled event', event);
     }
   }
 });

ライブ・サンプル

  • 連絡先の割り当ては、CCとUCの両方のダイヤラで利用できますが、CC ContactPadでは、ユーザーインターフェイス内で指定された連絡先名が視覚化されません。

インタラクティブ・ヒストリー

もうすぐだ！

つづく SDK参考資料.