एजेंट के लुक और अनुभव को अनुकूलित करें

आलेख
12/03/2024

आपके एजेंट का कैनवास उसके स्वरूप और अनुभव को निर्धारित करता है। आप इच्छित परिवर्तनों की जटिलता के आधार पर कैनवास को दो तरीकों से अनुकूलित कर सकते हैं:

उस वेबसाइट के HTML कोड में जावास्क्रिप्ट स्टाइलिंग के साथ डिफ़ॉल्ट कैनवास को अनुकूलित करें जहां आप अपना एजेंट तैनात करते हैं।
यदि आप कोड विकास में निवेश किए बिना छोटे अनुकूलन करना चाहते हैं तो यह दृष्टिकोण उपयोगी है।
वेब चैट कैनवास पर आधारित कस्टम कैनवास का उपयोग करें।Bot Framework
इस दृष्टिकोण के लिए व्यापक डेवलपर ज्ञान की आवश्यकता होती है। यह उन संगठनों के लिए उपयोगी है जो पूर्णतः कस्टम अनुभव चाहते हैं।

महत्त्वपूर्ण

आप इस आलेख में शामिल नमूना कोड को केवल उपयोग के लिए स्थापित और उपयोग कर सकते हैं। Copilot Studio नमूना कोड "जैसा है" के रूप में लाइसेंसयुक्त है तथा किसी भी सेवा स्तर अनुबंध या समर्थन सेवाओं से बाहर रखा जाता है. इसका उपयोग करने का जोखिम आपका होगा.

Microsoft कोई अभिव्यक्त वारंटी, गारंटी या शर्तें नहीं देता है तथा जिसमें व्यापारिकता, किसी विशेष उद्देश्य के लिए फिटनेस और गैर-उल्लंघन सहित सभी निहित वारंटियां सम्मिलित नहीं होती हैं.

वेब अप्प
टीमें

आपके द्वारा एजेंट बनाने और प्रकाशित करने के बाद, आपके ग्राहक एजेंट के वेब चैट कैनवास का उपयोग उसके साथ बातचीत करने के लिए कर सकते हैं।...

आप अनुकूलित कैनवास को अपने एजेंट को स्वचालित रूप से वार्तालाप प्रारंभ करने के लिए कॉन्फ़िगर करने के साथ भी संयोजित कर सकते हैं।

अंत में, आप अपने एजेंट का नाम और आइकन (जब इसे साझा किया जाता है) सीधे पोर्टल से बदल सकते हैं। Microsoft Teams

एजेंट का नाम और आइकन बदलें

महत्त्वपूर्ण

यदि आपका एजेंट ग्राहक सेवा के लिए ओमनीचैनल से जुड़ा हुआ है, तो उसका नाम Azure पोर्टल पंजीकरण में प्रदर्शन नाम गुण द्वारा परिभाषित किया जाता है.

आप एजेंट का नाम और आइकन बदल सकते हैं. इससे उन सभी चैनलों के आइकन प्रभावित होंगे जहां आप अपना एजेंट प्रकाशित करते हैं।

नेविगेशन मेनू में, सेटिंग्स के अंतर्गत, विवरण चुनें.
एजेंट का नाम और आइकन बदलें. Microsoft Teams आइकन प्रारूपों पर अनुशंसाओं की समीक्षा करें.
अपने परिवर्तनों को प्रतिबद्ध करने के लिए सहेजें चुनें.

महत्त्वपूर्ण

आपके एजेंट का आइकन अपडेट करने के बाद, नया आइकन हर जगह दिखाई देने में 24 घंटे तक का समय लग सकता है.

टोकन समापन बिंदु पुनः प्राप्त करें

अपने कैनवास को अनुकूलित करने के लिए, चाहे वह डिफ़ॉल्ट कैनवास हो या आपके द्वारा कनेक्ट किया गया कस्टम कैनवास हो, आपको अपने एजेंट का विवरण प्राप्त करना होगा।

नेविगेशन मेनू में सेटिंग्स के अंतर्गत, चैनल का चयन करें.
मोबाइल ऐप चुनें.
टोकन एंडपॉइंट के आगे, कॉपी करें चुनें.

डिफ़ॉल्ट कैनवास (सरल) को अनुकूलित करें

कुछ सरल CSS और जावास्क्रिप्ट स्टाइलिंग विकल्पों के साथ चैट कैनवास कैसा दिखाई देगा, इसे कॉन्फ़िगर करें।

सबसे पहले, आपको यह कॉन्फ़िगर करना होगा कि आप अपना एजेंट कैनवास कहां तैनात कर रहे हैं।

एक एजेंट बनाएँ और प्रकाशित करें.

नीचे दिए गए 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>" पर बराबर चिह्न (=) के बाद तथा दोहरे उद्धरण चिह्नों (") से घिरा होना चाहिए।

एजेंट आइकन, पृष्ठभूमि रंग और नाम को अनुकूलित करें

एक बार जब आप अपने एजेंट के साथ मिलकर अनुकूलित कैनवास पर काम कर लेते हैं, तो आप उसमें बदलाव कर सकते हैं।

आप अनेक पूर्वनिर्धारित शैलियों को कॉन्फ़िगर करने के लिए JavaScript styleOptions विकल्पों का उपयोग कर सकते हैं।

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 एम्बेड करना हो.

नोट

कस्टम कैनवास होस्ट करने के लिए सॉफ़्टवेयर विकास की आवश्यकता होती है. यहां हमारा मार्गदर्शन अनुभवी IT पेशेवरों, जैसे कि IT व्यवस्थापकों या डेवलपर्स के लिए आशयित है, जिन्हें डेवलपर टूल्स, उपयोगिताओं और IDE की बेहतर समझ है.

अनुकूलित करने के लिए एक नमूने का चयन करें

हम इन कस्टम-निर्मित नमूनों में से किसी एक के साथ काम करना शुरू करने की सलाह देते हैं Copilot Studio:

पूर्ण बंडल एक कस्टम कैनवास है जो Copilot Studio से सभी समृद्ध सामग्री दिखाने में सक्षम है। उदाहरण के लिए:
स्थान और फ़ाइल अपलोडिंग एक कस्टम कैनवास है जो उपयोगकर्ता का स्थान प्राप्त करने और उसे एजेंट को भेजने में सक्षम है। Copilot Studio उदाहरण के लिए:

या आप द्वारा प्रदान किए गए अन्य नमूना वेब चैट कैनवस में से चुन सकते हैं। Bot Framework

कैनवास को अनुकूलित करें `styleSetOptions`

डिफ़ॉल्ट कैनवास को अनुकूलित करने के साथ ही, आप कस्टम कैनवास को अनुकूलित करने के लिए styleSetOptions का उपयोग कर सकते हैं। सभी अनुकूलन योग्य गुण defaultStyleOptions.js में सूचीबद्ध हैं. आप क्या अनुकूलित कर सकते हैं और यह कैसा दिखेगा, इस बारे में अधिक जानकारी के लिए, वेब चैट अनुकूलन देखें।

अपने अनुकूलित कैनवास को परिनियोजित करें

अपने कस्टम कैनवास को होस्ट करने हेतु, सभी फ़ाइलों को एक वेब अनुप्रयोग पर परिनियोजित करें.

इसके माध्यम से साझा किया गया