Twilio Flex と Dynamics 365 の会話インテリジェンスを統合する (プレビュー)

[アーティクル]
05/22/2024

[この記事はプレリリースドキュメントであり、変更されることがあります。]

この統合により、営業担当者は Dynamics 365 から Twilio Flex の通話を発信および受信し、通話中のリアルタイムの文字起こしと、通話後に AI が生成した通話の分析情報を取得できるようになります。

重要

これはプレビュー機能です。
プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。これらの機能は、お客様が一足先にアクセスして追加使用条件の対象で、公式リリースの前に使用できるようになっています。

前提条件

Twilio アカウント
Twilio Flex アカウント – Flex アカウントの設定方法の詳細については、このリンクを参照してください
Sales Premium または Sales Enterprise ライセンスとシステム管理者権限を備えた Microsoft Dynamics 365 Sales 環境
Conversation Intelligence のインストールとセットアップ – 詳細
Dynamics 365 チャネル統合フレームワーク 1.0 のインストール詳細
ローカルの Node JS 環境のセットアップ
create-flex-plugin アプリケーション

ステップ 1: Twilio Flex をチャネルプロバイダーとして構成する

Dynamics 365 チャネル統合フレームワークで、Twilio Flex 用のチャネルプロバイダを作成する。例として下のスクリーンショットをご覧ください:

チャネルプロバイダーとして追加された Twilio のスクリーンショット。

次の値を入力します。::

チャネル URL:https://flex.twilio.com/agent-desktop
送信の通信を有効にする: はい
API バージョン: 1.0
受注のチャネル: 1
信頼できるドメイン:https://flex.twilio.com/
統一インターフェイスチャネルのアプリを選択する: 営業ハブ (または統合を有効にする他のアプリ)
チャネルのセキュリティロールを選択する: Twilio Flex を使用するロールを追加します。たとえば、営業担当者、営業マネージャーなど on.To は、Twilio Flex を iframe として Dynamics 365 内に埋め込み、Dynamics 365 組織の URL を許可された URL リストに追加します。詳細については、この記事を参照してください。

ステップ 2: SIPREC コネクタをインストールし、通話を Dynamics 365 にルーティングする

SIPREC コネクタアドオンをインストールします。
Twilio 管理センターの設定を開き、次のスクリーンショットに示すように、メディアを Dynamics 365 レコーダーにフォークするように構成します:

次のフィールドは重要です:
- 一意の名前: 名前を指定し、メモします。次のステップで使用する必要があります
- セッションレコーディングサーバー: Dynamics 365メディアレコーディングサーバーの URL を指定します。サポートされているレコーダーとリージョンのリストについては、サポートされているレコーダーエンドポイントとリージョンを参照してください。
  - メディアを最も近いレコーダーにフォークする場合は、次の URL を使用します: sip:SRS@media.recording.dynamics.com:5061;secure=true
  - 資格情報フィールドは空のままにすることができます。認証は、Twilio と Dynamics 間の TLS セットアップ上の証明書を使用して行われます。

ステップ 3: コールフローを構成してメディアを Dynamics 365 にフォークします

コンソールのスタジオフローセクションに移動し、音声 IVR フローを選択します。
右側のウィジェットライブラリの Voice セクションに、 フォークストリーム ウィジェットを追加します。
次に、ウィジェットを構成して、前に定義した SIPREC コネクタを使用してストリームをフォークするようにします:
次の値を入力します。

- ストリームアクション: スタート
- ストリームタイプ: Siprec
- コネクタ名: SIPREC コネクタに付けた名前です。この例では、SipRec1 です。
- トラック: 両方のトラック
- ストリームのパラメーター:
  - 役割: 着信 (この例では、着信通話を録音します)
  - CallerDisplayName: {{trigger.call.From}}
  - CalleeDisplayName: {{trigger.call.To}}
切り替え タブで、 フォークストリーム 通話がエージェントに送信される前に次のようになります:
フローを保存して公開する。

ステップ 4: Twilio 電話番号を構成する

新しく作成した Studio フローに Twilio 電話番号を指定する必要があります。

Twilio 電話番号コンソールから、所有している番号を選択するか、新しい番号を購入します。
電話番号を選択して開き、ページの音声セクションまでスクロールダウンします。
以下のスクリーンショットに示すように、着信通話 フィールドで先に定義したフローを選択します:

ステップ 5: 統合用に Dynamics 365 を構成する

Twilio を通話プロバイダーとして設定し、通話を録音できるユーザーや会話の分析情報に使用されるその他の情報を定義する録音ポリシーを構成しましょう。

営業ハブアプリで、変更エリアに移動し、Sales Insights の設定 を選択します。
会話インテリジェンス を選択します。
通話プロバイダーセクションで Twilio を選択し、Twilio アカウントの SID を指定します。
変更を保存します。
Twilio 通話プロバイダーを使用してレコーディングポリシーを構成します。
1. 録画ポリシーの作成 を選択し、ポリシーを設定します。詳細情報
2. 作成を選択し、公開を選択します。

ステップ 6: Flex プラグインを準備して、リアルタイムエクスペリエンスを統合します

Flex は React プロジェクトであり、UI に対して行ったカスタマイズはプラグインコンポーネントとして作成されます。

ノード環境の準備と空の Flex プラグインのセットアップは、このドキュメントの範囲外です。最初の Flex プラグインの作成に関する段階的なチュートリアルについては、 Twilioのドキュメントを参照してください。

Dynamics のカスタマイズコードを追加できる新しいプラグインを作成します。

この時点で、プラグインの JS ファイルは次のようになります:

plugin.js ファイルのスクリーンショット。

Microsoft CIF クライアントライブラリをプラグインに追加します。クライアントライブラリは Flex の起動時に非同期でロードする必要があるため、次のコードを Flex init 関数に追加します。

import React from 'react';
import \* as Flex from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';
import reducers, { namespace } from './states';
const PLUGIN\_NAME = 'SamplePlugin';
export interface CallStartedEvent {
  callId: string;
  startTime: Date;
  isIncomingCall: boolean;
  contactNumber: string;
  contactName: string;
}

export interface CallEndedEvent {
  callId: string;
  callDurationInSeconds: number;
  callTerminationReason: string; // \['success', 'error'\]
  callEndTime: Date;
  isCallStarted: boolean;
}

export default class SamplePlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN\_NAME);
  }
  /\*\*
   \* This code is run when your plugin is being started
   \* Use this to modify any UI components or attach to the actions framework
   \*
   \* @param flex { typeof Flex }
   \* @param manager { Flex.Manager }
   \*/
  async init(flex: typeof Flex, manager: Flex.Manager): Promise&lt;void&gt; {
    this.registerReducers(manager);
    this.loadCIF();
    flex.Actions.addListener('afterAcceptTask', (payload) =&gt; {
      const callStartedEvent : CallStartedEvent = {
        callId: payload.task.\_task.attributes.call\_sid,
        startTime: new Date(),
        isIncomingCall: true,
        contactName: payload.task.\_task.attributes.caller,
        contactNumber: payload.task.\_task.attributes.caller
      };
      // @ts-ignore
      Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_STARTED', callStartedEvent);
    });

    flex.Actions.addListener('afterCompleteTask', (payload) =&gt; {
      // @ts-ignore
      Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_ENDED', {
        callId: payload.task.\_task.attributes.call\_sid,
        callTerminationReason: 'success',
        callEndTime: new Date(),
        isCallStarted: true
      });
      const callEndedEvent : CallEndedEvent = {
        callId: payload.task.\_task.attributes.call\_sid,
        callEndTime: new Date(),
        callTerminationReason: 'success',
        isCallStarted: true
      };
 

      // @ts-ignore
      Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_ENDED', callEndedEvent);
    });

    const options: Flex.ContentFragmentProps = { sortOrder: -1 };
    flex.AgentDesktopView.Panel1.Content.add(&lt;div key="SamplePlugin-component" &gt;Hello Partner!&lt;/div&gt;, options);
  }

  loadCIF = () =&gt; {
    const script = document.createElement("script");
    script.src = \`${window.location.ancestorOrigins\[0\]}/webresources/Widget/msdyn\_ciLibrary.js\`;
    script.setAttribute('data-crmurl', window.location.ancestorOrigins\[0\]);
    script.setAttribute('data-cifid', 'CIFMainLibrary');
    document.body.appendChild(script);
  }

  /\*\*

   \* Registers the plugin reducers
   \*
   \* @param manager { Flex.Manager }
   \*/
  private registerReducers(manager: Flex.Manager) {
    if (!manager.store.addReducer) {
      // eslint-disable-next-line
      console.error(\`You need FlexUI &gt; 1.9.0 to use built-in redux; you are currently on ${Flex.VERSION}\`);
      return;
    }
    manager.store.addReducer(namespace, reducers);
  }
}

plugin を公開します。
以上で、テストする準備ができた Flex プラグインが完成しました。

ステップ 7: Dynamics 365 の会話インテリジェンスと Flex の統合をテストする

営業ハブアプリにログインし、電話アイコンを選択します。右側のペインに Twilio Flex が埋め込まれていることがわかります。

営業ハブアプリに埋め込まれた Twilio ダイヤラーのスクリーンショット。

Twilio でステータスを 対応可能 に設定していることを確認し、手順 4: Twilio の電話番号を構成するで設定した Twilio の電話番号に電話をかけます。

埋め込みダイヤラーの通話通知のスクリーンショット

通話に応答して録音を開始したら、トランスクリプト タブに移動してリアルタイムのトランスクリプションを表示し、通話終了後に 通話概要 ページで通話インサイトを表示します。

通話分析の概要ページの表示と理解

次の方法で共有

Twilio Flex と Dynamics 365 の会話インテリジェンスを統合する (プレビュー)

前提条件

ステップ 1: Twilio Flex をチャネルプロバイダーとして構成する

ステップ 2: SIPREC コネクタをインストールし、通話を Dynamics 365 にルーティングする

ステップ 3: コールフローを構成してメディアを Dynamics 365 にフォークします

ステップ 4: Twilio 電話番号を構成する

ステップ 5: 統合用に Dynamics 365 を構成する

ステップ 6: Flex プラグインを準備して、リアルタイムエクスペリエンスを統合します

ステップ 7: Dynamics 365 の会話インテリジェンスと Flex の統合をテストする

フィードバック

その他のリソース

次の方法で共有

Twilio Flex と Dynamics 365 の会話インテリジェンスを統合する (プレビュー)

前提条件

ステップ 1: Twilio Flex をチャネル プロバイダーとして構成する

ステップ 2: SIPREC コネクタをインストールし、通話を Dynamics 365 にルーティングする

ステップ 3: コール フローを構成してメディアを Dynamics 365 にフォークします

ステップ 4: Twilio 電話番号を構成する

ステップ 5: 統合用に Dynamics 365 を構成する

ステップ 6: Flex プラグインを準備して、リアルタイム エクスペリエンスを統合します

ステップ 7: Dynamics 365 の会話インテリジェンスと Flex の統合をテストする

関連情報

フィードバック

その他のリソース

ステップ 1: Twilio Flex をチャネルプロバイダーとして構成する

ステップ 3: コールフローを構成してメディアを Dynamics 365 にフォークします

ステップ 6: Flex プラグインを準備して、リアルタイムエクスペリエンスを統合します