แชร์ผ่าน

เริ่มการสนทนากับเอเจนต์โดยอัตโนมัติ

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

สำคัญ

การให้เอเจนต์เริ่มการสนทนาจะปรากฏขึ้นใน การวิเคราะห์ ของคุณและจะเพิ่มจำนวนเซสชันของคุณ

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

โดยค่าเริ่มต้น เอเจนต์ที่สร้างขึ้นด้วย Copilot Studio และ เผยแพร่ไปยังเว็บไซต์ จะโหลดโดยไม่มีคำทักทาย และจะรอให้ผู้ใช้เริ่มการสนทนา

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

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

สำคัญ

คุณสามารถติดตั้ง และใช้โค้ดตัวอย่างที่รวมอยู่ในบทความนี้สําหรับใช้กับ Copilot Studio เท่านั้น โค้ดตัวอย่างได้รับอนุญาต "ตามสภาพ" และไม่รวมอยู่ในข้อตกลงระดับการให้บริการหรือบริการสนับสนุนใด ๆ คุณจะต้องเป็นผู้ยอมรับความเสี่ยงที่อาจจะเกิดขึ้นในการใช้งานดังกล่าว

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

กําหนดพื้นที่ทํางานเริ่มต้น

กำหนดค่าลักษณะของพื้นที่การแชทได้ด้วยตัวเลือกการกำหนดรูปแบบ CSS และ JavaScript ง่าย ๆ

ขั้นแรกคุณต้องกำหนดค่าว่าคุณจะปรับใช้พื้นที่ทำงานบอทของคุณที่ใด

  1. สร้างและเผยแพร่เอเจนต์

  2. คัดลอกโค้ด HTML ต่อไปนี้และบันทึกไปยังไฟล์ที่ชื่อว่าindex.html อีกวิธีหนึ่งคือ คัดลอก และวางโค้ดลงใน w3schools.com HTML ลองใช้ตัวแก้ไข

    <!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title> 
    <!-- This styling is for Web Chat demonstration purposes. For larger projects, we recommend you move style to a separate file -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }
    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add the token endpoint for your agent below
        var theURL = "<YOUR TOKEN ENDPOINT>";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

  3. เรียกใช้จุดสิ้นสุดโทเค็นสําหรับตัวแทนของคุณ

  4. ใน index.html ที่บรรทัด var theURL = "<YOUR TOKEN ENDPOINT>" ให้แทนที่ตัวยึดตำแหน่งด้วยโทเค็นเอ็นด์พอยท์สำหรับเอเจนต์ของคุณ

  5. เปิด index.html โดยใช้เบราว์เซอร์ที่ทันสมัย (ตัวอย่างเช่น Microsoft Edge) เพื่อเปิดตัวแทนในพื้นที่ทํางานแบบกําหนดเอง

  6. ทดสอบเอเย่นต์เพื่อให้แน่ใจว่าคุณได้รับคําตอบจากเจ้าหน้าที่ และทํางานได้อย่างถูกต้อง

    ถ้าคุณพบปัญหา ตรวจสอบให้แน่ใจว่าคุณได้เผยแพร่ตัวแทนของคุณ และจุดสิ้นสุดโทเค็นอยู่ในตําแหน่งที่ถูกต้อง ตำแหน่งข้อมูลโทเค็นควรอยู่หลังเครื่องหมายเท่ากับ (=) ที่บรรทัด var theURL = "<YOUR TOKEN ENDPOINT>" และล้อมรอบด้วยเครื่องหมายคำพูดคู่ (")

เรียกใช้จุดสิ้นสุดโทเค็นสําหรับตัวแทนของคุณ

หากต้องการปรับแต่งพื้นที่ทํางานของคุณ ไม่ว่าจะเป็นพื้นที่ทํางานเริ่มต้นหรือพื้นที่ทํางานแบบกําหนดเองที่คุณเชื่อมต่อ คุณจําเป็นต้องมีจุดสิ้นสุดโทเค็นสําหรับตัวแทนของคุณ

  1. ในเมนูนำทาง ภายใต้ การตั้งค่า เลือก ช่องทาง

  2. เลือก อีเมล แผงการกําหนดค่าสําหรับช่องนี้จะปรากฏขึ้น

  3. ถัดจาก ตำแหน่งข้อมูลโทเค็น เลือก คัดลอก

เปลี่ยนคำทักทายเริ่มต้นของเอเจนต์

โค้ดใน index.html ไฟล์ทําให้มีการเรียกหัวข้อโดยอัตโนมัติเมื่อโหลดตัวแทน ตามค่าเริ่มต้น รหัสจะเรียกใช้หัวข้อคําทักทาย คุณยังสามารถสร้างหัวข้อใหม่ และแยกหัวข้อคําทักทายเริ่มต้นไปยังหัวข้อใหม่นั้นได้

ในทั้งสองกรณี คุณ ทำการเปลี่ยนแปลงหัวข้อที่คุณต้องการเรียกตามปกติ

ถ้าคุณปรับเปลี่ยนหัวข้อ คําทักทาย หรือสร้างใหม่ คุณควรระบุว่าผู้ใช้กําลังพูดคุยกับตัวแทน (หรือ "ตัวแทนเสมือน") ตัวบ่งชี้ดังกล่าวช่วยให้ผู้ใช้เข้าใจว่าพวกเขาไม่ได้พูดคุยกับมนุษย์

เราขอแนะนําให้คุณปรับเปลี่ยนหัวข้อ คําทักทา ยที่กําหนดไว้ล่วงหน้าเพื่อให้คุณไม่ต้องแก้ไข index.html โค้ด

  1. ไปที่หน้า หัวข้อ สําหรับตัวแทนของคุณ และเลือกหัวข้อ คําทักทาย

  2. แก้ไขข้อความภายในโหนดข้อความ คุณยังสามารถ เพิ่มหรือลบโหนดได้

  3. เลือก บันทึก

  4. เผยแพร่เอเจนต์ของคุณ

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

สร้างหัวข้อแบบกําหนดเองใหม่

คำเตือน

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

  1. ไปที่หน้า หัวข้อ สำหรับเอเจนต์ของคุณ

  2. เลือก เพิ่มหัวข้อ>จากเอกสารเปล่า

  3. ใส่ชื่อสําหรับหัวข้อใหม่ของคุณ

  4. เพิ่มโหนด ข้อความ และกําหนดค่าด้วยข้อความที่ต้องการ

  5. เลือก บันทึก เมื่อคุณแก้ไขข้อความเสร็จแล้ว

  6. ไปที่หน้า หัวข้อ อีกครั้ง และเลือกหัวข้อ คําทักทาย

  7. ลบโหนดข้อความทั้งหมดจากหัวข้อคําทักทาย

  8. หากต้องการเปลี่ยนเส้นทางตัวแทนไปยังหัวข้อใหม่ของคุณโดยอัตโนมัติ ให้เพิ่มโหนด เปลี่ยนเส้นทาง ด้วยหัวข้อใหม่สําหรับปลายทาง

  9. เลือก บันทึก และเผยแพร่ตัวแทนของคุณ

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