ปรับแต่งรูปลักษณ์และความรู้สึกของ ตัวแทน

บทความ
12/09/2024

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

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

สำคัญ

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

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

Web app
Teams

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

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

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

เปลี่ยนชื่อและไอคอน ตัวแทน

สำคัญ

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

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

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

สำคัญ

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

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

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

ในเมนูนำทาง ภายใต้ การตั้งค่า เลือก ช่องทาง
เลือก แอปบนมือถือ
ถัดจาก ตำแหน่งข้อมูลโทเค็น เลือก คัดลอก

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

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

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

สร้างและเผยแพร่ ตัวแทน

คัดลอกและวางโค้ด 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 agent 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('<AGENT TOKEN ENDPOINT>');

         // Specifies the language the agent 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>

ในไฟล์ index.html ที่คุณสร้าง ป้อนตำแหน่งข้อมูลโทเค็นของคุณที่บรรทัด const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";
เปิด index.html โดยใช้เบราว์เซอร์ที่ทันสมัย (เช่น Microsoft Edge) เพื่อเปิด ตัวแทน ในแคนวาสที่กำหนดเอง
ทดสอบ ตัวแทน เพื่อให้แน่ใจว่าคุณได้รับคำตอบจากมันและมันทำงานอย่างถูกต้อง

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

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

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

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

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

เปลี่ยนไอคอน ตัวแทน

อัปเดตไฟล์ 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'
};

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

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

อัปเดตไฟล์ index.html ที่มีโค้ดตัวอย่างต่อไปนี้:
```
const styleOptions = {
  backgroundColor: 'lightgray'
};  
```
เปลี่ยน backgroundColor เป็นสีใดก็ได้ที่คุณต้องการ คุณสามารถใช้ชื่อสีค่า CSS มาตรฐาน ค่า RGB หรือ HEX

เปลี่ยนชื่อ ตัวแทน

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

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

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

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

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

หมายเหตุ

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

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

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

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

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

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

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

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

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

แชร์ผ่าน

ปรับแต่งรูปลักษณ์และความรู้สึกของ ตัวแทน

เปลี่ยนชื่อและไอคอน ตัวแทน

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

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

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

เปลี่ยนไอคอน ตัวแทน

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

เปลี่ยนชื่อ ตัวแทน

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

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

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

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

เปลี่ยนไอคอนอวาตาร์และชื่อ ตัวแทน

เปลี่ยนสีและคำอธิบาย ตัวแทน

คำติชม

แหล่งทรัพยากรเพิ่มเติม

แชร์ผ่าน

ปรับแต่งรูปลักษณ์และความรู้สึกของ ตัวแทน

เปลี่ยนชื่อและไอคอน ตัวแทน

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

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

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

เปลี่ยนไอคอน ตัวแทน

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

เปลี่ยนชื่อ ตัวแทน

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

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

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

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

เนื้อหาที่เกี่ยวข้อง

คำติชม

แหล่งทรัพยากรเพิ่มเติม

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