รวม Twilio Flex เข้ากับระบบการสนทนาอัจฉริยะของ Dynamics 365 (ตัวอย่าง)

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

การรวมนี้ช่วยให้ผู้ขายของคุณสามารถโทรออกและรับสาย Twilio Flex จาก Dynamics 365 และรับการถอดความแบบเรียลไทม์ในระหว่างการโทรและข้อมูลเชิงลึกของการโทรที่สร้างโดย AI หลังจากการโทร

สำคัญ

• นี่คือคุณลักษณะพรีวิว
• คุณลักษณะพรีวิวไม่ได้มีไว้สำหรับการนำไปใช้งานจริง และอาจมีการจำกัดฟังก์ชันการทำงาน คุณลักษณะเหล่านี้อยู่ภายใต้ ข้อกำหนดการใช้งานเพิ่มเติม และสามารถใช้ได้ก่อนการเผยแพร่อย่างเป็นทางการเพื่อให้ลูกค้าสามารถเข้าถึงล่วงหน้าและแสดงความคิดเห็น

ข้อกำหนดเบื้องต้น

• บัญชี Twilio

• บัญชี Twilio Flex – ดู ลิงก์ นี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการตั้งค่าบัญชี Flex

• สภาพแวดล้อม Microsoft Dynamics 365 Sales ที่มีสิทธิการใช้งาน Sales Premium หรือ Sales Enterprise พร้อมด้วยสิทธิ์การใช้งานของผู้ดูแลระบบ

• ติดตั้งและตั้งค่าระบบการสนทนาอัจฉริยะแล้ว – เรียนรู้เพิ่มเติม

• ติดตั้งเฟรมเวิร์กการรวมช่องทางของ 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 เป็น iframe ภายใน Dynamics 365 เพิ่ม URL องค์กร Dynamics 365 ลงในรายการ URL ที่อนุญาต สำหรับข้อมูลเพิ่มเติม โปรดดู บทความ นี้

ขั้นตอนที่ 2: ติดตั้งตัวเชื่อมต่อ SIPREC และกำหนดเส้นทางการโทรไปยัง Dynamics 365

1. ติดตั้งส่วนเพิ่มเติม ตัวเชื่อมต่อ SIPREC

2. เปิดการตั้งค่าศูนย์การจัดการ Twilio และกำหนดค่าเพื่อแยกสื่อไปยังโปรแกรมบันทึกของ Dynamics 365 ดังที่แสดงในภาพหน้าจอต่อไปนี้:

   

   ฟิลด์ต่อไปนี้มีความสำคัญที่ควรทราบ:

   • ชื่อที่ไม่ซ้ำ: ระบุชื่อและจดบันทึก คุณจะต้องใช้ข้อมูลดังกล่าวในขั้นตอนต่อไป

   • เซิร์ฟเวอร์การบันทึกเซสชัน: ระบุ URL เซิร์ฟเวอร์การบันทึกสื่อ Dynamics 365 สำหรับรายการโปรแกรมบันทึกและภูมิภาคที่รองรับ โปรดดู ตำแหน่งข้อมูลโปรแกรมบันทึกและภูมิภาคที่รองรับ

     • หากคุณต้องการแยกสื่อไปยังโปรแกรมบันทึกที่ใกล้ที่สุด ให้ใช้ URL ต่อไปนี้: sip:SRS@media.recording.dynamics.com:5061;secure=true

     • ฟิลด์ข้อมูลประจำตัวสามารถเว้นว่างไว้ได้ การรับรองความถูกต้องเสร็จสิ้นด้วยใบรับรองในการตั้งค่า TLS ระหว่าง Twilio กับ Dynamics

ขั้นตอนที่ 3: กำหนดค่าโฟลว์การโทรเพื่อแยกสื่อไปยัง Dynamics 365

1. ไปยัง ส่วนโฟลว์ของสตูดิโอ ในคอนโซลและเลือกโฟลว์ IVR เสียง

2. ทางด้านขวาด้านล่าง ภายใต้ส่วน เสียง ในไลบรารีวิดเจ็ต ให้เพิ่มวิดเจ็ต แยกสตรีม:

   

3. ตอนนี้ ให้กำหนดค่าวิดเจ็ตเพื่อแยกสตรีมโดยใช้ตัวเชื่อมต่อ SIPREC ที่คุณกำหนดไว้ก่อนหน้านี้:

   

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 ในส่วนผู้ให้บริการการโทร และระบุ SID บัญชี Twilio

4. บันทึกการเปลี่ยนแปลง

5. กำหนดค่านโยบายการบันทึกโดยใช้ผู้ให้บริการการโทร Twilio

   1. เลือก สร้างนโยบายการบันทึก และกำหนดค่านโยบาย เรียนรู้เพิ่มเติม

   2. เลือก สร้าง แล้วเผยแพร่การตั้งค่า

ขั้นตอนที่ 6: เตรียมปลั๊กอิน Flex เพื่อรวมประสบการณ์แบบเรียลไทม์

Flex เป็นโครงการ React และการปรับแต่งที่คุณทำกับ UI จะถูกสร้างขึ้นเป็นส่วนประกอบของปลั๊กอิน

การเตรียมสภาพแวดล้อม Node และการตั้งค่าปลั๊กอิน Flex ที่ว่างอยู่นอกเหนือขอบเขตของเอกสารนี้ โปรดดู คู่มือของ Twilio สำหรับบทช่วยสอนทีละขั้นตอนเกี่ยวกับการสร้างปลั๊กอิน Flex ตัวแรกของคุณ

สร้างปลั๊กอินใหม่ที่พร้อมให้คุณเพิ่มโค้ดการปรับแต่งสำหรับ 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 แล้วโทรออกไปยังหมายเลขโทรศัพท์ Twilio ที่คุณตั้งค่าไว้ใน ขั้นตอนที่ 4: กำหนดค่าหมายเลขโทรศัพท์ Twilio

เมื่อคุณรับสายและเริ่มการบันทึก ให้ไปที่แท็บ การถอดความ เพื่อดูการถอดความแบบเรียลไทม์ จากนั้นดูข้อมูลเชิงลึกการโทรในหน้า สรุปการโทร หลังจากวางสาย

ข้อมูลที่เกี่ยวข้อง

ดูและทำความเข้าใจหน้าสรุปการโทร