Voice拡張機能を利用したオムニチャネルのカスタマイズ

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

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

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

サンプル作成

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

Visualforceページを作成

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

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

   <apex:page >
   Hello, Visualforceワールド
   </apex:page>
   

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

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

1. [開発者コンソール]を開きます
2. [File], [New] から [Lightning Component]を選択します
3. 以下の情報で作成します
   • Name: AuraVoiceExtOmniWidget
4. 作成された、AuraVoiceExtOmniWidget.cmp に以下のコードを貼り付けます

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

5. [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ページを作成

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

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

Voice拡張機能を選択

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

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

Voice 拡張機能ページを編集

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

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

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

コンポーネントを配置

拡張を有効化

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

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

権限を割り当てる

システム管理者以外は、自動で権限が付きません。通常の利用者に対しては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です。

• https://help.salesforce.com/s/articleView?id=service.voice_pt_setup_extensions.htm&type=5
• https://developer.salesforce.com/docs/atlas.en-us.voice_developer_guide.meta/voice_developer_guide/voice_example_voice_extension_flexipage.htm