Share via

ปรับแต่งลักษณะของ Copilot

  • บทความ

สำคัญ

ความสามารถและคุณลักษณะต่างๆ ของ Power Virtual Agents เป็น ส่วนหนึ่งของ Microsoft Copilot Studio แล้ว ภายหลังการลงทุนที่สำคัญใน Generative AI และการรวมที่ได้รับการปรับปรุงใน Microsoft Copilot

บทความและภาพหน้าจอบางรายการอาจอ้างถึง Power Virtual Agents ในขณะที่เราอัปเดตคู่มือและเนื้อหาการฝึกอบรม

ลักษณะ Copilot ของคุณถูกกำหนดโดยพื้นที่ทำงาน หากต้องการปรับแต่ง Copilot คุณต้องปรับแต่งพื้นที่ทำงาน คุณสามารถปรับแต่งพื้นที่ทำงานได้สองวิธี ขึ้นอยู่กับความซับซ้อนของการปรับแต่ง:

สำคัญ

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

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

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

คุณยังสามารถรวมพื้นที่ทำงานที่กำหนดเองได้ด้วย การกำหนดค่า Copilot ของคุณเพื่อเริ่มการสนทนาโดยอัตโนมัติ

สุดท้ายนี้ คุณสามารถ เปลี่ยนชื่อและไอคอน Copilot ของคุณ(เมื่อมีการ แชร์ใน Microsoft Teams) โดยตรงจากพอร์ทัล

เปลี่ยนชื่อและไอคอน Copilot

สำคัญ

หาก Copilot ของคุณเชื่อมต่อกับ ช่องทาง Omni สำหรับ Customer Service จะมีการกำหนดชื่อโดยคุณสมบัติ ชื่อที่แสดง ในการลงทะเบียนพอร์ทัล Azure

คุณสามารถเปลี่ยนชื่อและไอคอน Copilot ได้ ซึ่งจะส่งผลต่อไอคอนในทุกช่องทางที่คุณเผยแพร่ Copilot

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

  2. เปลี่ยนชื่อและไอคอน Copilot ตรวจสอบคำแนะนำบนรูปแบบไอคอน Microsoft Teams

  3. เลือก บันทึก เพื่อยืนยันการเปลี่ยนแปลงของคุณ

    บานหน้าต่างรายละเอียด Copilot ช่วยให้คุณเปลี่ยนชื่อและไอคอนได้

สำคัญ

หลังจากอัปเดตไอคอนของ Copilot อาจใช้เวลาถึง 24 ชั่วโมงก่อนที่ไอคอนใหม่จะปรากฏในทุกตำแหน่ง

ดึงตำแหน่งข้อมูลโทเค็น

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

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

  2. เลือก แอปบนมือถือ

    ภาพหน้าจอของไทล์ช่องทางแอปบนมือถือ

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

    ภาพหน้าจอของรหัสโทเค็นจุดสิ้นสุด

ปรับแต่งพื้นที่ทำงานเริ่มต้น (แบบง่าย)

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

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

  1. สร้างและเผยแพร่ Copilot

  2. คัดลอกและวางโค้ด HTML ด้านล่างและบันทึกเป็น index.html
    คุณยังสามารถคัดลอกและวางโค้ดด้านล่างลงใน w3schools.com HTML try it editor คุณจะยังคงต้องเพิ่มตำแหน่งข้อมูลโทเค็นของคุณ

     <!doctype html>
 <html lang="en">
   <head>
     <title>Contoso Sample Web Chat</title>
     <!--
       This styling is for the Web Chat demonstration purposes.
       It is recommended that style is moved to a separate file for organization in larger projects.

       Please visit https://github.com/microsoft/BotFramework-WebChat for details about Web Chat.
     -->
     <style>
       html,
       body {
         height: 100%;
       }

       body {
         margin: 0;
       }

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

       #banner {
         align-items: center;
         background-color: black;
         display: flex;
         height: 50px;
       }

       #webchat {
         height: calc(100% - 50px);
         overflow: hidden;
         position: fixed;
         top: 50px;
         width: 100%;
       }
     </style>
   </head>
   <body>
     <div>
       <div id="banner">
         <h1>Contoso copilot name</h1>
       </div>
       <div id="webchat" role="main"></div>
     </div>

     <!--
       In this sample, the latest version of Web Chat is being used.
       In production environment, the version number should be pinned and version bump should be done frequently.

       Please visit https://github.com/microsoft/BotFramework-WebChat/tree/main/CHANGELOG.md for changelog.
     -->
     <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

     <script>
       (async function () {
         // Specifies style options to customize the Web Chat canvas.
         // Please visit https://microsoft.github.io/BotFramework-WebChat for customization samples.
         const styleOptions = {
           // Hide upload button.
           hideUploadButton: true
         };

         // Specifies the token endpoint URL.
         // To get this value, visit Copilot Studio > Settings > Channels > Mobile app page.
         const tokenEndpointURL = new URL('<COPILOT TOKEN ENDPOINT>');

         // Specifies the language the copilot and Web Chat should display in:
         // - (Recommended) To match the page language, set it to document.documentElement.lang
         // - To use current user language, set it to navigator.language with a fallback language
         // - To use another language, set it to supported Unicode locale

         // Setting page language is highly recommended.
         // When page language is set, browsers will use native font for the respective language.

         const locale = document.documentElement.lang || 'en'; // Uses language specified in <html> element and fallback to English (United States).
         // const locale = navigator.language || 'ja-JP'; // Uses user preferred language and fallback to Japanese.
         // const locale = 'zh-HAnt'; // Always use Chinese (Traditional).

         const apiVersion = tokenEndpointURL.searchParams.get('api-version');

         const [directLineURL, token] = await Promise.all([
           fetch(new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL))
             .then(response => {
               if (!response.ok) {
                 throw new Error('Failed to retrieve regional channel settings.');
               }

               return response.json();
             })
             .then(({ channelUrlsById: { directline } }) => directline),
           fetch(tokenEndpointURL)
             .then(response => {
               if (!response.ok) {
                 throw new Error('Failed to retrieve Direct Line token.');
               }

               return response.json();
             })
             .then(({ token }) => token)
         ]);

         // The "token" variable is the credentials for accessing the current conversation.
         // To maintain conversation across page navigation, save and reuse the token.

         // The token could have access to sensitive information about the user.
         // It must be treated like user password.

         const directLine = WebChat.createDirectLine({ domain: new URL('v3/directline', directLineURL), token });

         // Sends "startConversation" event when the connection is established.

         const subscription = directLine.connectionStatus$.subscribe({
           next(value) {
             if (value === 2) {
               directLine
                 .postActivity({
                   localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
                   locale,
                   name: 'startConversation',
                   type: 'event'
                 })
                 .subscribe();

               // Only send the event once, unsubscribe after the event is sent.
               subscription.unsubscribe();
             }
           }
         });

         WebChat.renderWebChat({ directLine, locale, styleOptions }, document.getElementById('webchat'));
       })();
     </script>
   </body>
 </html>

  3. ในไฟล์ index.html ที่คุณสร้าง ป้อนตำแหน่งข้อมูลโทเค็นของคุณที่บรรทัด const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";

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

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

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

ปรับแต่งไอคอน สีพื้นหลัง และชื่อ Copilot

เมื่อคุณได้พื้นที่ทำงานที่กำหนดเองที่ทำงานร่วมกับ Copilot ของคุณแล้ว คุณสามารถทำการเปลี่ยนแปลงได้

คุณสามารถใช้ตัวเลือก styleOptions ของ JavaScript ในการกำหนดค่าสไตล์ที่กำหนดไว้ล่วงหน้าจำนวนมาก

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

เปลี่ยนไอคอน Copilot

  1. อัปเดตไฟล์ index.html ที่มีโค้ดตัวอย่างต่อไปนี้:

    const styleOptions = {
  accent: '#00809d',
  botAvatarBackgroundColor: '#FFFFFF',
  botAvatarImage: 'https://learn.microsoft.com/azure/bot-service/v4sdk/media/logo_bot.svg',
  botAvatarInitials: 'BT',
  userAvatarImage: 'https://avatars.githubusercontent.com/u/661465'
};

  2. แทนที่รูปภาพประจำตัว Copilot และผู้ใช้ด้วยรูปภาพบริษัทของคุณ
    หากคุณไม่มี URL ของรูปภาพ คุณสามารถใช้สตริงรูปภาพที่เข้ารหัส Base64 แทนได้

เปลี่ยนสีพื้นหลัง

  1. อัปเดตไฟล์ index.html ที่มีโค้ดตัวอย่างต่อไปนี้:

    const styleOptions = {
  backgroundColor: 'lightgray'
};

  2. เปลี่ยน backgroundColor เป็นสีใดก็ได้ที่คุณต้องการ คุณสามารถใช้ชื่อสีค่า CSS มาตรฐาน ค่า RGB หรือ HEX

เปลี่ยนชื่อ Copilot

  1. อัปเดตข้อความ <h1> ในไฟล์ index.html ต่อไปนี้:

    <body>
  <div id="banner">
    <h1><img src="contosocopilot-teams.png"> Contoso copilot name</h1>
  </div>

  2. เปลี่ยนข้อความเป็นอะไรก็ได้ที่คุณต้องการเรียก Copilot คุณยังสามารถแทรกรูปภาพได้ แม้ว่าคุณอาจต้องจัดรูปแบบเพื่อให้แน่ใจว่าพอดีกับส่วนหัวเรื่อง

ปรับแต่งและโฮสต์พื้นที่ทำงานแชทของคุณ (ขั้นสูง)

คุณสามารถเชื่อมต่อ Copilot ของ Copilot Studio ด้วยพื้นที่ทำงานแบบกำหนดเองที่โฮสต์เป็นเว็บแอปแบบสแตนด์อโลน ตัวเลือกนี้ดีที่สุดหากคุณต้องการฝังไฟล์ iFrame ในหลาย ๆ หน้าเว็บ

หมายเหตุ

การโฮสต์พื้นที่ทำงานแบบกำหนดเองจำเป็นต้องมีการพัฒนาซอฟต์แวร์ คำแนะนำของเรามีไว้สำหรับผู้เชี่ยวชาญด้านไอทีที่มีประสบการณ์ เช่น ผู้ดูแลระบบไอทีหรือนักพัฒนาที่มีความเข้าใจอย่างถ่องแท้เกี่ยวกับเครื่องมือสำหรับนักพัฒนา ระบบสาธารณูปโภค และ IDE

เลือกตัวอย่างเพื่อปรับแต่ง

เราขอแนะนำให้เริ่มต้นด้วยตัวอย่างเหล่านี้ที่สร้างขึ้นเองเพื่อใช้งานกับ Copilot Studio:

  • ชุดรวมเต็ม คือพื้นที่ทำงานที่กำหนดเองที่สามารถแสดงเนื้อหาที่สมบูรณ์ทั้งหมดจาก Copilot Studio ตัวอย่างเช่น

    พื้นที่ทำงานแบบกำหนดเองรวมเต็ม

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

    ตำแหน่งและไฟล์ที่อัปโหลดพื้นที่ทำงานแบบกำหนดเอง

หรือคุณสามารถเลือกจาก ตัวอย่างพื้นที่ทำงานแชทบนเว็บอื่น ๆ ที่ให้บริการโดย Bot Framework

ปรับแต่งพื้นที่ทำงานโดยใช้ styleSetOptions

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

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

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