Service Cloud Voice の Voice 拡張機能を利用することで、オムニチャネルの下部に [さらに表示]を追加し、開発した内容を表示することができるようになります。
クリックすることで、開発者が Lightning Web Component(LWC)、Lightning コンポーネント(Aura)、Visualforceページを埋め込むことができるようになります。

本ドキュメントではサンプルページの作成手順を提示します。

[さらに表示]を選択	Voice 拡張機能でコンポーネントを表示

サンプル作成

サポートしている、Visualforceページ、Lightningコンポーネント、Lightning Web Componentの作成をします。
全て実施する必要はなく、最低限どれか1つを実施することで動作確認は可能です。

Visualforceページを作成

サンプルのVisualforceページを作成します。
ここでは、ブラウザ上からの作成手順を示します。
補足: 有識者はSalesforce DXなどコマンドベースやVS Codeの拡張から作成するなど別の方法を取ることができます。

Salesforce の設定から [カスタムコード], [Visualforce ページ]の順に移動します
[新規]のボタンを押下します
以下の情報で作成します
- 表示ラベル: VfVoiceExtOmniWidget
- 名前: VfVoiceExtOmniWidget
- Lightning Experience、エクスペリエンスビルダーサイト、およびモバイルアプリケーションで利用可能: チェックを入れる
Visualforce Markup には以下のコードを貼り付けます
```
<apex:page >
Hello, Visualforceワールド
</apex:page>
```

Lightning コンポーネント(Aura コンポーネント)を作成

サンプルのLightningコンポーネントを作成します。

[開発者コンソール]を開きます
[File], [New] から [Lightning Component]を選択します
以下の情報で作成します
- Name: AuraVoiceExtOmniWidget

作成された、AuraVoiceExtOmniWidget.cmp に以下のコードを貼り付けます

<aura:component implements="opencti:availableForVoiceExtension" access="global">
<lightning:card variant="Narrow" title="Aura Voice Extension">
    Hello, Auraワールド
</lightning:card>
</aura:component>

[File], [Save]を選択し、保存します

Lightning Web Componentを作成

サンプルの Lightning Web Component を作成します。
本ドキュメントではSalesforce CLIの導入、CLIの組織認証、プロジェクトの作成については省略します。

プロジェクトが作成されている前提で以下のようにコンポーネントを作成します

sf force lightning component create --name lwcVoiceExtOmniWidget --type lwc --output-dir force-app/main/default/lwc

ファイル: lwcVoiceExtOmniWidget.js-meta.xml
isExposed を true に、targetに lightning__VoiceExtensionを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>64.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__VoiceExtension</target>
    </targets>
</LightningComponentBundle>

ファイル: lwcVoiceExtOmniWidget.html

<template>
    <lightning-card variant="Narrow" title="LWC Voice Extension">
        Hello, LWCワールド
    </lightning-card>
</template>

次のコマンドを実行して、対象の組織にデプロイします。
${SF_TARGET_ORG} は実際の組織のエイリアス名などに置き換えてください。デフォルト組織を設定済みの場合は、--target-org オプションごと消してください。

sf project deploy start --metadata LightningComponentBundle:lwcVoiceExtOmniWidget --ignore-conflicts --target-org ${SF_TARGET_ORG}

Voice 拡張機能を作成

Voice 拡張機能用Lightningページを作成

Salesforceの設定から [ユーザーインターフェース], [Lightning アプリケーションビルダー]の順に移動します
[新規]ボタンを押下します
[Voice 拡張機能]を選択し、[次へ]ボタンを押下します
[表示ラベル] を入力(名前は任意ですが、ここでは VoiceExtLightningPage )と入力し、[次へ]ボタンを押下します
ページテンプレートは [1つの範囲]から変更せず、[完了]ボタンを押下します
上記手順で、編集用のページの準備が整いました

音声拡張用のLightningページを新規作成

Voice拡張機能を選択

ページの表示ラベル名を設定

ページテンプレートを選択

Voice 拡張機能ページを編集

サンプル作成で作成したコンポーネントを配置していきます。
ここでは、Visualforceページ、Lightning コンポーネント、Lightning Web Componentの全てを配置した例を提示します。

左のコンポーネントメニューから [Visualforce]をページにドラッグ&ドロップします
1. ドロップ後、配置したコンポーネントにフォーカス当たっている状態で、右側のプロパティを編集する欄にある [Visualforce ページ名] から作成した、 VfVoiceExtOmniWidgetを選択します
左のコンポーネントメニュー、カスタムセクションから AuraVoiceExtOmniWidget を配置します
左のコンポーネントメニュー、カスタムセクションから lwcVoiceExtOmniWidget を配置します
[保存]ボタンを押下します
初回の場合、モーダルが表示されるので [有効化]ボタンを押下します

Lightningアプリケーションビルダー編集

コンポーネントを配置

拡張を有効化

以下の手順で有効化します。

Salesforceの設定 [機能設定], [サービス], [Voice], [パートナーテレフォニーコンタクトセンター]の順に移動します
編集対象のコンタクトセンターを選択します
[編集]ボタンを押下します
[Voice 拡張機能]の項目で作成した、Lightningページ ( ここでは、VoiceExtLightningPage )を選択します
[常に Voice 拡張機能を表示] にチェックを入れます
[保存]ボタンを押下します

権限を割り当てる

システム管理者以外は、自動で権限が付きません。通常の利用者に対してはVisualforceへのアクセス権限が必要です。
権限セット、またはプロファイルに作成した Visualforceページ( VfVoiceExtOmniWidget )へのアクセス許可を追加します。

以上の設定をすることで、Voice 拡張機能によるカスタマイズが利用可能になります。

補足

Service Cloud Voiceのバージョン 18.0 を利用しています。
デフォルトでは以下のコンポーネントが準備されています。

接続状況 (opencti:voiceHealthChecks)
- 以下の2つの機能が搭載されています
  - オペレータが音声通話で不調があった時に、自己解決するために必要なヒントが記述されています
  - Amazon Connectの要件チェック機能
    - サポートされているブラウザのバージョンか
    - マイクへのアクセスが許可されているか
    - Amazon Connectと同期しているか
音声 ID (opencti:voiceIdCard)
- Amazon Connect Voice ID を表示
- 音声通話レコードのLightningレコードページに配置可能な音声 IDコンポーネントと同じです

参考URL

公式の手順、参照情報は次のURLです。