將 Twilio Flex 與 Dynamics 365 交談智慧 (預覽版) 整合

[本文章是發行前版本文件，隨時可能變更。]

賣家可以透過這種整合，從 Dynamics 365 撥打和接收 Twilio Flex 通話，並在通話期間獲得即時謄寫，並在通話後取得 AI 產生的通話見解。

重要

• 這是預覽功能。
• 預覽功能不供生產時使用，而且可能功能受限。 這些功能應受補充使用規定規範，並且是在正式發行前先行推出，讓客戶可以搶先體驗並提供意見反應。

先決條件

• Twilio 帳戶

• Twilio Flex 帳戶 – 如需有關如何設定 Flex 帳戶的詳細資訊，請參閱此連結

• 使用 Sales Premium 或 Sales Enterprise 授權的 Microsoft Dynamics 365 Sales 環境，以及系統管理員權限

• 已安裝和設定交談智慧 – 深入了解

• 已安裝 Dynamics 365 管道整合架構 1.0。 了解詳細資訊

• 本機 Node JS 環境設定

• create-flex-plugin 應用程式

步驟 1：將 Twilio Flex 設定為管道提供者

在 Dynamics 365 管道整合架構中，建立 Twilio Flex 的管道提供者。 請參閱下方螢幕擷取畫面做為範例：

輸入下列值::

• 管道 URL：https://flex.twilio.com/agent-desktop

• 啟用輸出通訊：是

• API 版本：1.0

• 管道順序：1

• 信任的網域：https://flex.twilio.com/

• 選取管道的整合介面應用程式：銷售中心 (或任何其他要啟用整合的應用程式)

• 選取管道的資訊安全角色：新增要使用 Twilio Flex 的角色。 例如，銷售人員、銷售經理等角色。若要將 Twilio Flex 內嵌為 Dynamics 365 中的 iFrame，請將 Dynamics 365 組織 URL 新增至允許的 URL 清單。 如需詳細資訊，請參閱這篇文章。

步驟 2：安裝 SIPREC 連接器，並將通話路由至 Dynamics 365

1. 安裝 SIPREC 連接器附加元件。

2. 開啟 Twilio 系統管理中心設定，並將其設定為將媒體派生至 Dynamics 365 錄音機，如下列螢幕擷取畫面所示：

   

   需要注意下列欄位：

   • 唯一名稱：指定名稱，並將其記下。 後續步驟中需要用到此名稱

   • 工作階段錄製伺服器：指定 Dynamics 365 媒體錄製伺服器 URL。 如需支援的錄音機及地區清單，請參閱支援的錄音機端點和地區。

     • 如果您想要將媒體派生至最鄰近的錄音機，請使用下列 URL：sip:SRS@media.recording.dynamics.com:5061;secure=true

     • 認證欄位可以保留空白。 驗證是透過 Twilio 與 Dynamics 之間 TLS 設定上的憑證完成的。

步驟 3：設定通話流程以將媒體派生至 Dynamics 365

1. 瀏覽至主控台中的工作室流程區段，然後選取語音 IVR 流程。

2. 在右側 widget 方法庫的語音區段底下，新增派生串流 widget：

   

3. 現在使用您先前定義的 SIPREC 連接器，設定 widget 來派生串流。

   

4. 輸入下列值：

   - 串流動作：開始

   • 流類類型：Siprec
   • 連接器名稱：您賦予 SIPREC 連接器的名稱。 在本範例中，名稱為 SipRec1。
   • 音軌：兩個音軌
   • 串流參數：

     • 角色：輸入 (在本範例中，我們要錄製撥入通話)

     • CallerDisplayName：{{trigger.call.From}}

     • CalleeDisplayName：{{trigger.call.To}}

5. 在轉換索引標籤中，將派生串流設定為在通話傳送至專員之前進行：

   

6. 儲存流程並發佈。

步驟 4：設定 Twilio 電話號碼

您必須將 Twilio 電話號碼指向新建立的工作室流程。

1. 從 Twilio 電話號碼主控台選取您擁有的號碼，或購買新的號碼。

2. 選取電話號碼以將其開啟，然後向下捲動至頁面上的語音區段。

3. 選取您先前已在通話撥入欄位中定義的流程，如下列螢幕擷取畫面所示：

   

步驟 5：設定 Dynamics 365 以進行整合

讓我們將 Twilio 設定為通話提供者，並設定錄製原則，以定義可錄製通話的人員，以及其他用於交談見解的資訊。

1. 在銷售中心應用程式中，移至變更區域，並選取 Sales Insights 設定。

2. 選取交談智慧。

   

3. 選取通話提供者區段中的 Twilio，並指定 Twilio 帳戶 SID。

4. 儲存變更。

5. 使用 Twilio 通話提供者設定錄製原則。

   1. 選取建立錄製原則，並設定原則。 深入了解。

   2. 選取建立，然後發佈設定。

步驟 6：準備 Flex 外掛程式以整合即時體驗

Flex 是 React 專案，您對 UI 所做的自訂會建立為外掛程式元件。

準備 Node 環境以及設定空的 Flex 外掛程式超出本文件的範圍。 如需建立您的第一個 Flex 外掛程式的逐步教學課程，請參閱 Twilio 的文件。

建立可供您新增 Dynamics 自訂程式碼的全新外掛程式。

此時，您的外掛程式 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<void> {
    this.registerReducers(manager);
    this.loadCIF();
    flex.Actions.addListener('afterAcceptTask', (payload) => {
      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) => {
      // @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(<div key="SamplePlugin-component" >Hello Partner!</div>, options);
  }

  loadCIF = () => {
    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 > 1.9.0 to use built-in redux; you are currently on ${Flex.VERSION}\`);
      return;
    }
    manager.store.addReducer(namespace, reducers);
  }
}

發佈外掛程式。
現在有了可供測試的 Flex 外掛程式！

步驟 7：測試 Dynamics 365 交談智慧與 Flex 整合

登入銷售中心應用程式，選取通話圖示。 您會在右窗格中看到 Twilio Flex。

確定已在 Twilio 中，將您的狀態設定為可用，並撥打您在步驟 4：設定 Twilio 電話號碼中設定的 Twilio 電話號碼。

接聽通話並開始錄音後，請瀏覽至文字記錄索引標籤，以檢視即時謄寫，接著在通話結束後檢視通話摘要頁面中的通話見解。

相關資訊

檢視並了解通話摘要頁面