Προσαρμογή της εμφάνισης και της αίσθησης ενός αντιπροσώπου

Σημείωμα

Οι δυνατότητες σε αυτό το άρθρο υποστηρίζονται από την τυπική πλεξούδα, η οποία χρησιμοποιεί τις επιλογές χρέωσης που περιγράφονται στην ενότητα Άδειες χρήσης για εκπροσώπους που υποστηρίζονται από την τυπική πλεξούδα. Μάθετε πώς μπορείτε να αποκτήσετε πρόσβαση σε τυπικές δυνατότητες σε τυπικούς παράγοντες και ροές εκπροσώπου της Access.

Ο καμβάς παράγοντα ελέγχει πώς εμφανίζεται ο παράγοντας στους χρήστες. Μπορείτε να προσαρμόσετε τον καμβά με δύο τρόπους:

Προσαρμόστε τον προεπιλεγμένο καμβά χρησιμοποιώντας JavaScript και CSS στην τοποθεσία Web σας. Χρησιμοποιήστε αυτή την επιλογή για απλές αλλαγές.
Χρησιμοποιήστε έναν προσαρμοσμένο καμβά με βάση τον καμβά συνομιλίας Web του Bot Framework. Αυτή η επιλογή απαιτεί εμπειρία ανάπτυξης και υποστηρίζει πλήρη προσαρμογή.

Μπορείτε επίσης να συνδυάσετε τον προσαρμοσμένο καμβά με τη ρύθμιση παραμέτρων μιας αυτόματης έναρξης συνομιλίας.

Μπορείτε να αλλάξετε το όνομα και το εικονίδιο του παράγοντα στην πύλη.

Αφού δημοσιεύσετε έναν παράγοντα, οι χρήστες μπορούν να αλληλεπιδράσουν με αυτό μέσω του καμβά Συνομιλία στο Web.

Σημαντικό

Μπορείτε να εγκαταστήσετε και να χρησιμοποιήσετε το δείγμα κώδικα που περιλαμβάνεται σε αυτό το άρθρο μόνο για χρήση με το Copilot Studio. Το δείγμα κώδικα διαθέτει άδεια χρήσης "ως έχει" και εξαιρείται από οποιεσδήποτε συμβάσης παροχής υπηρεσιών ή υπηρεσίες υποστήριξης. Το χρησιμοποιείτε με δική σας ευθύνη.

Η Microsoft δεν παρέχει καμία ρητή εγγύηση ή όρο και αποποιείται ρητά όλες τις σιωπηρές εγγυήσεις, συμπεριλαμβανομένης της εμπορευσιμότητας, καταλληλότητας για συγκεκριμένο σκοπό και μη παραβίασης πνευματικών δικαιωμάτων.

Αλλαγή του ονόματος και του εικονιδίου του πράκτορα

Εφαρμογή Web
Εφαρμογή Teams

Σημαντικό

Αφού ενημερώσετε το εικονίδιο για έναν παράγοντα, μπορεί να χρειαστούν έως 24 ώρες για να εμφανιστεί παντού το νέο εικονίδιο.
Εάν ο πράκτοράς σας είναι συνδεδεμένος στο Omnichannel for Customer Service, η ιδιότητα Display στην καταχώρηση πύλης Azure ορίζει το όνομά της.
Εάν ο πράκτοράς σας προορίζεται για δημοσίευση στο Teams, εξετάστε τις απαιτήσεις για τα εικονίδια στην τεκμηρίωση προγραμματιστή του Microsoft Teams.

Μεταβείτε στη σελίδα Επισκόπηση για τον παράγοντά σας.
Επιλέξτε Επεξεργασία δίπλα στην επιλογή Λεπτομέρειες.
Αλλάξτε το όνομα και το εικονίδιο του παράγοντα όπως θέλετε.
Επιλέξτε Αποθήκευση.

Προσαρμογή του προεπιλεγμένου καμβά (απλός)

Χρησιμοποιήστε JavaScript και CSS για να προσαρμόσετε τον προεπιλεγμένο καμβά.

Πρώτα, ρυθμίστε τις παραμέτρους της τοποθεσίας όπου αναπτύσσετε τον καμβά copilot σας.

Δημιουργία και δημοσίευση ενός παράγοντα.

Αντιγράψτε το δείγμα κώδικα HTML σε ένα αρχείο με την ονομασία index.html. Μπορείτε επίσης να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας δοκιμής HTML.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Contoso Web Chat Assistant" />
    <title>Contoso Sample Web Chat Test</title>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      let webChatInstance = null;
      let directLineUrl = null;

      // Replace with your token endpoint
      const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";
      const styleOptions = {
        "accent": "#0078D4",
        "autoScrollSnapOnPage": true,
        "autoScrollSnapOnPageOffset": 0,
        "avatarBorderRadius": "7%",
        "avatarSize": 31,
        "backgroundColor": "#e8e9eb",
        "botAvatarBackgroundColor": "#ffffff00",
        "botAvatarImage": "https://powercatexternal.blob.core.windows.net/creatorkit/Assets/ChatbotLogoBlue.png",
        "botAvatarInitials": "B",
        "bubbleAttachmentMaxWidth": 480,
        "bubbleAttachmentMinWidth": 250,
        "bubbleBackground": "#f0eded",
        "bubbleBorderColor": "#f5f5f5",
        "bubbleBorderRadius": 41,
        "bubbleBorderStyle": "solid",
        "bubbleBorderWidth": 1,
        "bubbleFromUserBackground": "#ebefff",
        "bubbleFromUserBorderColor": "#f5f5f5",
        "bubbleFromUserBorderRadius": 41,
        "bubbleFromUserBorderStyle": "solid",
        "bubbleFromUserBorderWidth": 1,
        "bubbleFromUserNubOffset": 0,
        "bubbleFromUserNubSize": 0,
        "bubbleFromUserTextColor": "#242424",
        "bubbleImageHeight": 10,
        "bubbleImageMaxHeight": 240,
        "bubbleImageMinHeight": 240,
        "bubbleMessageMaxWidth": 480,
        "bubbleMessageMinWidth": 120,
        "bubbleMinHeight": 50,
        "bubbleNubOffset": 0,
        "bubbleTextColor": "#242424",
        "emojiSet": true,
        "fontSizeSmall": "70%",
        "hideUploadButton": false,
        "messageActivityWordBreak": "break-word",
        "monospaceFont": "Consolas",
        "paddingRegular": 10,
        "paddingWide": 10,
        "primaryFont": null,
        "sendBoxBackground": "#e8e9eb",
        "sendBoxBorderTop": "solid 1px #808080",
        "sendBoxButtonColor": "#0078d4",
        "sendBoxButtonColorOnHover": "#006cbe",
        "sendBoxButtonShadeBorderRadius": 40,
        "sendBoxButtonShadeColorOnHover": "",
        "sendBoxHeight": 60,
        "sendBoxPlaceholderColor": "#171616",
        "sendBoxTextColor": "#2e2d2d",
        "showAvatarInGroup": "status",
        "spinnerAnimationHeight": 16,
        "spinnerAnimationPadding": 12,
        "spinnerAnimationWidth": 16,
        "subtleColor": "#000000FF",
        "suggestedActionBackgroundColor": "#006FC4FF",
        "suggestedActionBackgroundColorOnHover": "#0078D4",
        "suggestedActionBorderColor": "",
        "suggestedActionBorderRadius": 10,
        "suggestedActionBorderWidth": 1,
        "suggestedActionLayout": "flow",
        "suggestedActionTextColor": "#FFFFFFFF",
        "typingAnimationBackgroundImage": "url('https://wpamelia.com/wp-content/uploads/2018/11/ezgif-2-6d0b072c3d3f.gif')",
        "typingAnimationDuration": 5000,
        "typingAnimationHeight": 20,
        "typingAnimationWidth": 64,
        "userAvatarBackgroundColor": "#222222",
        "userAvatarImage": "https://avatars.githubusercontent.com/u/8174072?v=4&size=64",
        "userAvatarInitials": "U"
      };
      const backgroundImage = "";

      document.addEventListener('DOMContentLoaded', () => {
        const root = document.documentElement;
        root.style.setProperty('--primary-color', createGradient(styleOptions.accent));
        root.style.setProperty('--header-textColor', styleOptions.suggestedActionTextColor);

        if (backgroundImage) {
          const webchatElement = document.getElementById('webchat');
          webchatElement.style.backgroundImage = `url(${backgroundImage})`;
          webchatElement.style.backgroundSize = 'cover';
          webchatElement.style.backgroundPosition = 'center';
          webchatElement.style.backgroundRepeat = 'no-repeat';

          const overlay = document.createElement('div');
          overlay.className = 'webchat-overlay';
          webchatElement.appendChild(overlay);
        }
      });

      function createGradient(baseColor) {
        const r = parseInt(baseColor.slice(1, 3), 16);
        const g = parseInt(baseColor.slice(3, 5), 16);
        const b = parseInt(baseColor.slice(5, 7), 16);
        const lighterColor = `#${Math.min(255, r + 30).toString(16).padStart(2, '0')}${Math.min(255, g + 30).toString(16).padStart(2, '0')}${Math.min(255, b + 30).toString(16).padStart(2, '0')}`;
        const darkerColor = `#${Math.max(0, r - 30).toString(16).padStart(2, '0')}${Math.max(0, g - 30).toString(16).padStart(2, '0')}${Math.max(0, b - 30).toString(16).padStart(2, '0')}`;
        return `linear-gradient(135deg, ${lighterColor}, ${baseColor}, ${darkerColor})`;
      }

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

      function showChat() {
        const popup = document.getElementById("chatbot-popup");
        const openButton = document.getElementById("open-chat");
        popup.classList.add("visible");
        openButton.classList.add("hidden");
      }

      function hideChat() {
        const popup = document.getElementById("chatbot-popup");
        const openButton = document.getElementById("open-chat");
        popup.classList.remove("visible");
        openButton.classList.remove("hidden");
      }

      function createCustomStore() {
        return window.WebChat.createStore(
          {},
          ({ dispatch }) =>
            (next) =>
            (action) => {
              if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                dispatch({
                  type: "DIRECT_LINE/POST_ACTIVITY",
                  meta: { method: "keyboard" },
                  payload: {
                    activity: {
                      channelData: { postBack: true },
                      name: "startConversation",
                      type: "event",
                    },
                  },
                });
              }
              return next(action);
            }
        );
      }

      async function restartConversation() {
        try {
          if (!directLineUrl) {
            console.error("DirectLine URL not initialized");
            return;
          }

          const response = await fetch(tokenEndpoint);
          const conversationInfo = await response.json();

          if (!conversationInfo.token) {
            throw new Error("Failed to get conversation token");
          }

          const newDirectLine = window.WebChat.createDirectLine({
            domain: `${directLineUrl}v3/directline`,
            token: conversationInfo.token,
          });

          const webchatElement = document.getElementById("webchat");
          webChatInstance = window.WebChat.renderWebChat(
            {
              directLine: newDirectLine,
              styleOptions,
              store: createCustomStore(),
            },
            webchatElement
          );
        } catch (err) {
          console.error("Failed to restart conversation:", err);
        }
      }

      async function initializeChat() {
        try {
          const response = await fetch(regionalChannelSettingsURL);
          const data = await response.json();
          directLineUrl = data.channelUrlsById.directline;

          if (!directLineUrl) {
            throw new Error("Failed to get DirectLine URL");
          }

          const conversationResponse = await fetch(tokenEndpoint);
          const conversationInfo = await conversationResponse.json();

          if (!conversationInfo.token) {
            throw new Error("Failed to get conversation token");
          }

          const directLine = window.WebChat.createDirectLine({
            domain: `${directLineUrl}v3/directline`,
            token: conversationInfo.token,
          });

          webChatInstance = window.WebChat.renderWebChat(
            {
              directLine,
              styleOptions,
              store: createCustomStore(),
            },
            document.getElementById("webchat")
          );
        } catch (err) {
          console.error("Failed to initialize chat:", err);
        }
      }

      initializeChat();
  </script>
  <style>
    :root {
      --primary-gradient: var(--primary-color);
      --chat-width: 450px;
      --chat-height: 520px;
      --header-height: 56px;
      --border-radius: 16px;
      --transition-speed: 0.3s;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    }
    body {
      min-height: 100vh;
      background-color: #f3f4f6;
    }
    #chatbot-popup {
      display: none;
      position: fixed;
      bottom: 32px;
      right: 32px;
      width: var(--chat-width);
      height: var(--chat-height);
      background: white;
      border-radius: var(--border-radius);
      box-shadow: 0 18px 40px -5px rgba(0, 0, 0, 0.2),
        0 15px 20px -5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      opacity: 0;
      transform-origin: bottom right;
      transform: scale(0.95);
      transition: all var(--transition-speed) ease-in-out;
      z-index: 999;
    }
    #chatbot-popup.visible {
      display: block;
      opacity: 1;
      transform: scale(1);
    }
    #chatbot-header {
      background: var(--primary-color);
      padding: 16px 20px;
      height: var(--header-height);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--header-textColor);
    }
    .header-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 500;
    }
    .header-buttons {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .icon-button {
      background: none;
      border: none;
      color: var(--header-textColor);
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .icon-button:hover {
      color: var(--header-textColor);
      background: rgba(255, 255, 255, 0.1);
    }
    .icon-button:focus {
      outline: 2px solid rgba(255, 255, 255, 0.5);
      outline-offset: 2px;
    }
    #webchat {
      height: calc(100% - var(--header-height));
      background-color: #f9fafb;
      position: relative;
    }
    .webchat-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.85);
      pointer-events: none;
      z-index: 1;
    }
    #webchat > div {
      position: relative;
      z-index: 2;
    }
    #webchat .webchat__basic-transcript__content {
      white-space: pre-wrap !important;
      word-break: break-word !important;
    }
    #webchat .webchat__bubble__content {
      padding: 8px 12px !important;
    }
    #webchat .webchat__bubble {
      max-width: 85% !important;
      margin: 8px !important;
    }
    #webchat .webchat__basic-transcript__content ul,
    #webchat .webchat__basic-transcript__content ol,
    #webchat .webchat__bubble__content ul,
    #webchat .webchat__bubble__content ol {
      padding-left: 24px !important;
      margin: 8px 0 !important;
      list-style-position: outside !important;
    }
    #webchat .webchat__basic-transcript__content li,
    #webchat .webchat__bubble__content li {
      margin: 4px 0 !important;
      padding-left: 4px !important;
    }
    #open-chat {
      position: fixed;
      bottom: 32px;
      right: 32px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--primary-gradient);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transition: all var(--transition-speed) ease-in-out;
      z-index: 998;
    }
    #open-chat.hidden {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
      pointer-events: none;
    }
    #open-chat:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    #open-chat:focus {
      outline: 3px solid rgba(79, 70, 229, 0.5);
      outline-offset: 2px;
    }
    #open-chat svg {
      width: 28px;
      height: 28px;
      color: white;
      transition: transform 0.2s ease;
    }
    .main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 48px 24px;
    }
    .main-content h1 {
      font-size: 36px;
      color: #111827;
      text-align: center;
    }
    .main-content p {
      font-size: 18px;
      color: #4b5563;
      line-height: 1.6;
      margin-bottom: 48px;
      text-align: center;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
    .content-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      margin-bottom: 32px;
    }
    .content-box {
      background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
      padding: 32px;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -1px rgba(0, 0, 0, 0.06);
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .content-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }
    .content-box.featured {
      grid-column: span 2;
      min-height: 350px;
      background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
      color: #000000;
    }
    .content-box h2 {
      font-size: 24px;
      margin-bottom: 16px;
      position: relative;
    }
    .content-box p {
      font-size: 16px;
      color: #6b7280;
      margin-bottom: 0;
    }
    .content-box.featured p {
      color: #000000;
    }
    @media (max-width: 768px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
      .content-box.featured {
        grid-column: span 1;
      }
      .main-content {
        padding: 24px 16px;
      }
      .main-content h1 {
        font-size: 28px;
      }
      #chatbot-popup {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
      }
    }
  </style>
</head>
<body>
  <div class="main-content">
    <h1>Header</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</p>
    <div class="content-grid">
      <div class="content-box featured">
        <h2>Featured Content</h2>
        <p>Primary content area with custom styling and gradient background</p>
      </div>
      <div class="content-box">
        <h2>Section One</h2>
        <p>Content box with minimal design</p>
      </div>
      <div class="content-box">
        <h2>Section Two</h2>
        <p>Another content section with consistent styling</p>
      </div>
    </div>
  </div>
  <div id="chatbot-popup" role="complementary" aria-label="Chat Assistant">
    <div id="chatbot-header">
      <div class="header-title">
        <svg
          class="chat-icon"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path
            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
          ></path>
        </svg>
        <span>Contoso Assistant</span>
      </div>
      <div class="header-buttons">
        <button
          class="icon-button"
          id="restart-button"
          onclick="restartConversation()"
          aria-label="Restart Conversation"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path
              d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
            ></path>
            <path d="M3 3v5h5"></path>
          </svg>
        </button>
        <button
          class="icon-button"
          id="close-button"
          onclick="hideChat()"
          aria-label="Close Chat"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
    <div id="webchat" role="main"></div>
  </div>
  <button
    id="open-chat"
    onclick="showChat()"
    aria-label="Open Chat Assistant"
  >
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <path
        d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
      ></path>
    </svg>
  </button>
</body>
</html>

Ανακτήστε το σημείο τερματισμού του token.
Στο index.html, αντικαταστήστε:
```
const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";
```
με το σημείο τέλους διακριτικού.
Ανοίξτε το index.html σε ένα σύγχρονο πρόγραμμα περιήγησης, όπως Microsoft Edge.
Δοκιμάστε τον πράκτορα.

Εάν ο εκπρόσωπος δεν απαντήσει:

Βεβαιωθείτε ότι ο πράκτορας έχει δημοσιευτεί.
Επαληθεύστε την τιμή τελικού σημείου διακριτικού.
Επιβεβαιώστε ότι εμφανίζεται το τελικό σημείο διακριτικού μετά το =, μέσα σε διπλά εισαγωγικά ".

Ανάκτηση του τελικού σημείου διακριτικού για τον εκπρόσωπό σας

Για να προσαρμόσετε τον καμβά σας, είτε πρόκειται για τον προεπιλεγμένο καμβά είτε για έναν προσαρμοσμένο καμβά στον οποίο συνδέεστε, χρειάζεστε το τελικό σημείο διακριτικού για τον πράκτορά σας.

Στις Ρυθμίσεις, επιλέξτε Κανάλια.
Επιλέξτε Ηλεκτρονικό ταχυδρομείο.
Δίπλα στο τελικό σημείο διακριτικού, επιλέξτε Αντιγραφή.

Προσαρμογή του εικονιδίου παράγοντα, του χρώματος φόντου και του ονόματος

Χρησιμοποιήστε το styleOptions αντικείμενο για να ρυθμίσετε προκαθορισμένα στυλ.

Για περισσότερες πληροφορίες σχετικά με τις προσαρμογές και τις συνδέσεις στο αρχείο defaultStyleOptions.js, ανατρέξτε στο θέμα προσαρμογή Συνομιλία στο Web.

Αλλάξτε το εικονίδιο του πράκτορα

Ενημερώστε το 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",
  "userAvatarInitials": "U"
};

Αντικαταστήστε και τις δύο εικόνες avatar με τις εικόνες της εταιρείας σας. Εάν δεν έχετε διεύθυνση URL εικόνας, μπορείτε να χρησιμοποιήσετε μια συμβολοσειρά εικόνας με κωδικοποίηση Base64.

Αλλαγή χρώματος φόντου

Στο προσθέστε index.html ένα backgroundColor στοιχείο στον ορισμό σας styleOptions :
```
const styleOptions = {
  "backgroundColor": "lightgray",
  // ...
};
```
Αλλάξτε backgroundColor σε όποιο χρώμα θέλετε. Μπορείτε να χρησιμοποιήσετε τυπικά ονόματα χρωμάτων CSS, τιμές RGB ή HEX.

Αλλαγή του ονόματος του πράκτορα

Ενημερώστε το κείμενο κεφαλίδας <h1> στο index.html αρχείο με τον ακόλουθο κώδικα:
```
<body>
  <div id="banner">
    <h1><img src="contoso-agent.png"> Contoso agent name</h1>
  </div>
  
```
Αλλάξτε το κείμενο σε όποιο θέλετε να είναι το όνομα του πράκτορα. Μπορείτε επίσης να εισαγάγετε μια εικόνα, αλλά ίσως χρειαστεί να την διαμορφώσετε για να χωρέσει στην ενότητα επικεφαλίδας.

Προσαρμογή και φιλοξενία καμβά συνομιλίας (για προχωρημένους)

Μπορείτε να συνδέσετε τον παράγοντα Copilot Studio με έναν προσαρμοσμένο καμβά που φιλοξενείτε ως μεμονωμένη εφαρμογή Web. Αυτή η επιλογή λειτουργεί καλύτερα εάν χρειάζεται να ενσωματώσετε ένα προσαρμοσμένο iFrame σε πολλές ιστοσελίδες.

Σημείωμα

Η φιλοξενία ενός προσαρμοσμένου καμβά απαιτεί ανάπτυξη λογισμικού. Αυτή η καθοδήγηση προορίζεται για έμπειρους επαγγελματίες IT, όπως διαχειριστές IT ή προγραμματιστές που έχουν καλή κατανόηση των εργαλείων προγραμματισμού, των βοηθητικών προγραμμάτων και των ενσωματωμένων περιβαλλόντων ανάπτυξης (IDEs).

Ξεκινήστε με ένα από αυτά τα δείγματα που έχουν δημιουργηθεί ειδικά για εργασία με το Copilot Studio:

Full bundle είναι ένας προσαρμοσμένος καμβάς με δυνατότητα εμφάνισης όλου του εμπλουτισμένου περιεχομένου από το Copilot Studio. Για παράδειγμα:
Τοποποίηση και αποστολή αρχείων είναι ένας προσαρμοσμένος καμβάς με δυνατότητα λήψης της θέσης ενός χρήστη και αποστολής της σε έναν παράγοντα Copilot Studio. Για παράδειγμα:

Εναλλακτικά, δοκιμάστε ορισμένες άλλες sample Συνομιλία στο Web καμβάδες από το Bot Framework.

Όπως και με τον προεπιλεγμένο καμβά, μπορείτε να χρησιμοποιήσετε styleSetOptions για να τροποποιήσετε τον προσαρμοσμένο καμβά. Όλες οι προσαρμόσιμες ιδιότητες παρατίθενται στο defaultStyleOptions.js. Για περισσότερες πληροφορίες σχετικά με τις προσαρμογές, ανατρέξτε στο θέμα προσαρμογή Συνομιλία στο Web.

Αναπτύξτε τον προσαρμοσμένο καμβά σας

Για να φιλοξενήσετε τον προσαρμοσμένο καμβά σας, αναπτύξτε όλα τα αρχεία σε μια εφαρμογή web.

Σχόλια

Ήταν χρήσιμη αυτή η σελίδα;

Last updated on 2026-08-03