将 Twilio Flex 与 Dynamics 365 对话智能集成（预览）

项目
10/25/2023

[本文为预发布文档，可能会发生变化。]

此集成可以让您的销售人员拨打和接听来自 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 创建一个渠道提供商。请参见下方屏幕截图中的示例：

作为渠道提供商添加的 Twilio 的屏幕截图。

输入以下值::

渠道 URL：https://flex.twilio.com/agent-desktop
启用出站通信：是
API 版本：1.0
渠道顺序：1
可信域：https://flex.twilio.com/
选择渠道的统一界面应用：销售中心（或您希望启用集成的任何其他应用）
选择渠道的安全角色：添加将使用 Twilio Flex 的角色。例如，销售员、销售经理等。要将 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 流。
在右侧，在小组件库中的语音部分下，添加为流创建分支小组件：
现在，配置小组件来使用您之前定义的 SIPREC 连接器为流创建分支：
输入以下值：

- 流操作：开始
- 流类型：Siprec
- 连接器名称：您为 SIPREC 连接器提供的名称。在我们的示例中，为 SipRec1。
- 跟踪：两个跟踪
- 流参数：
  - 角色：入站（在我们的示例中，我们将记录传入呼叫）
  - CallerDisplayName：{{trigger.call.From}}
  - CalleeDisplayName：{{trigger.call.To}}
在转换选项卡中，将为流创建分支配置为在将调用发送到代理之前：
保存流并发布。

步骤 4：配置 Twilio 电话号码

您需要将一个 Twilio 电话号码指向新创建的工作室流。

从 Twilio 电话号码控制台中选择您拥有的号码 – 或购买新号码。
选择电话号码来打开该号码，然后向下滚动到页面上的语音部分。
如以下屏幕截图所示，选择您之前在呼叫传入字段中定义的流：

步骤 5：为集成配置 Dynamics 365

让我们将 Twilio 设置为通话提供程序，并配置一个记录策略来定义谁可以记录通话，以及用于对话见解的其他信息。

在销售中心应用中，转到“更改区域”，然后选择 Sales Insights 设置。
选择对话智能。
在“通话提供程序”部分选择 Twilio，并指定 Twilio 帐户 SID。
保存更改。
使用 Twilio 通话提供程序配置记录策略。
1. 选择创建记录策略，配置策略。了解详细信息。
2. 选择创建，然后发布设置。

步骤 6：准备 Flex 插件来集成实时体验

Flex 是一个 React 项目，您对 UI 的自定义作为插件组件创建。

准备 Node 环境以及设置一个空 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);
  }
}

发布插件。
我们现在有了一个 Flex 插件，可以进行测试了！

步骤 7：测试 Dynamics 365 对话智能和 Flex 集成

登录到销售中心应用，选择呼叫图标。您将看到 Twilio Flex 嵌入在右侧窗格中。

销售中心应用中嵌入的 Twilio 拨号程序的屏幕截图。

确保您已在 Twilio 中将状态设置为可用，拨打您在步骤 4：配置 Twilio 电话号码中设置的 Twilio 电话号码。

嵌入的拨号程序上的呼叫通知的屏幕截图

接听电话并开始记录后，导航到记录选项卡查看实时听录，然后在通话结束后在通话摘要页面中查看联络见解。

另请参见

查看和了解通话摘要页

通过