Menyesuaikan tampilan dan nuansa kopilot

Artikel
06/03/2024

Penting

Power Virtual Agents kemampuan dan fitur sekarang menjadi bagian dari Microsoft Copilot Studio mengikuti investasi signifikan dalam AI generatif dan integrasi yang ditingkatkan Microsoft Copilot.

Beberapa artikel dan tangkapan layar mungkin merujuk saat Power Virtual Agents kami memperbarui dokumentasi dan konten pelatihan.

Tampilan dan nuansa kopilot Anda ditentukan oleh kanvasnya. Untuk menyesuaikan kopilot, Anda harus menyesuaikan kanvasnya. Anda dapat menyesuaikan kanvas dengan dua cara, tergantung pada kompleksitas penyesuaian:

Sesuaikan kanvas default dengan gaya JavaScript dalam kode HTML situs web tempat Anda menyebarkan kopilot.
Pendekatan ini berguna jika Anda ingin membuat penyesuaian kecil tanpa berinvestasi dalam pengembangan kode.
Gunakan kanvas kustom yang didasarkan pada Bot Framework kanvas Obrolan Web.
Pendekatan ini membutuhkan pengetahuan pengembang yang luas. Ini berguna untuk organisasi yang menginginkan pengalaman yang sepenuhnya kustom.

Penting

Anda dapat menginstal dan menggunakan kode sampel yang disertakan dalam artikel ini hanya untuk digunakan dengan Microsoft Copilot Studio. Kode sampel dilisensikan "sebagaimana adanya" dan dikecualikan dari perjanjian tingkat layanan atau layanan dukungan. Anda menanggung risiko penggunaan.

Microsoft tidak memberikan jaminan, garansi, atau ketentuan tersurat dan mengecualikan semua jaminan tersirat, termasuk kelayakan untuk diperdagangkan, kesesuaian untuk tujuan tertentu, dan tidak adanya pelanggaran.

Aplikasi web
Tim

Setelah Anda membuat dan memublikasikan kopilot, pelanggan Anda dapat menggunakan kanvas Obrolan Web kopilot untuk berinteraksi dengannya.

Anda juga dapat menggabungkan kanvas yang disesuaikan dengan mengonfigurasi kopilot Anda untuk memulai percakapan secara otomatis.

Terakhir, Anda dapat mengubah nama dan ikon kopilot Anda (saat dibagikan Microsoft Teams) langsung dari portal.

Mengubah nama dan ikon kopilot

Penting

Jika kopilot Anda tersambung ke Multisaluran untuk Customer Service, namanya ditentukan oleh nama tampilan properti dalam pendaftaran portal Microsoft Azure.

Anda dapat mengubah nama dan ikon kopilot. Ini akan memengaruhi ikon di semua saluran tempat Anda memublikasikan kopilot.

Di menu navigasi, di bawah Pengaturan, pilih Detail.
Ubah nama dan ikon kopilot. Meninjau rekomendasi tentang Microsoft Teams format ikon
Pilih Simpan untuk menerapkan perubahan Anda.

Penting

Setelah memperbarui ikon kopilot, mungkin diperlukan waktu hingga 24 jam agar ikon baru muncul di mana saja.

Mengambil token titik akhir

Untuk menyesuaikan kanvas Anda, apakah itu kanvas default atau kustom yang Anda sambungkan, Anda perlu mengambil detail kopilot Anda.

Di menu navigasi di bawah Pengaturan, pilih Saluran.
Pilih Aplikasi seluler.
Di samping Token titik akhir, pilih Salin.

Sesuaikan kanvas default (sederhana)

Konfigurasikan tampilan kanvas obrolan dengan beberapa opsi gaya JavaScript CSS dan sederhana.

Pertama, Anda perlu mengonfigurasi tempat Anda menyebarkan kanvas kopilot.

Membuat dan menerbitkan kopilot.

Salin dan tempel kode HTML di bawah ini dan simpan sebagai index.html.
Anda juga dapat menyalin dan menempelkan kode di bawah ini ke # w3schools.com editor coba HTML. Anda masih perlu menambahkan token titik akhir.

 <!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>

Di file index.html yang Anda buat, masukkan titik akhir token Anda di baris const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.
Buka index.html menggunakan browser modern (misalnya, Microsoft Edge) untuk membuka kopilot di kanvas kustom.
Uji kopilot untuk memastikan bahwa Anda menerima respons darinya dan berfungsi dengan benar.

Jika Anda mengalami masalah, pastikan Anda telah memublikasikan kopilot Anda, dan titik akhir token Anda telah dimasukkan di tempat yang benar. Itu harus setelah tanda sama dengan (=) di garis const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>", dan dikelilingi oleh tanda kutip ganda (").

Mengkustomisasi ikon kopilot, warna latar belakang, dan nama

Setelah kanvas khusus bekerja dengan kopilot, Anda dapat mengubahnya.

Anda dapat menggunakan opsi JavaScript styleOptions untuk mengonfigurasi sejumlah gaya yang telah ditentukan sebelumnya.

Lihat kustomisasi Obrolan Web untuk tautan ke file defaultStyleOptions.js dan informasi selengkapnya tentang apa yang dapat Anda sesuaikan dan tampilannya.

Mengubah ikon kopilot

Perbarui file index.html dengan kode sampel berikut:

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'
};

Ganti gambar avatar kopilot dan pengguna dengan gambar perusahaan Anda.
Jika Anda tidak memiliki URL gambar, Anda dapat menggunakan string gambar yang dienkode base64.

Mengubah warna latar belakang

Perbarui file index.html dengan kode sampel berikut:

const styleOptions = {
  backgroundColor: 'lightgray'
};

Ubah backgroundColor ke warna apa pun yang Anda inginkan. Anda dapat menggunakan nama warna CSS standar, nilai RGB, atau hex.

Mengubah nama kopilot

<h1> Perbarui teks dalam berkas index.html dengan berikut ini:

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

Ubah teks menjadi apa pun yang ingin Anda panggil kopilot. Anda juga dapat memasukkan gambar, meskipun Anda mungkin perlu menyesuaikan gayanya untuk memastikannya pas di bagian tajuk.

Menyesuaikan dan meng-host kanvas obrolan Anda (lanjutan)

Anda dapat menghubungkan kopilot Anda Copilot Studio dengan kanvas kustom yang dihosting sebagai aplikasi web mandiri. Pilihan ini adalah yang terbaik jika Anda perlu menyematkan iFrame kustom di beberapa halaman web.

Catatan

Hosting kanvas kustom memerlukan pengembangan perangkat lunak. Panduan kami di sini ditujukan untuk profesional TI berpengalaman, seperti admin atau pengembang TI yang memiliki pemahaman yang baik tentang alat pengembang, utilitas, dan IDE.

Pilih sampel untuk disesuaikan

Sebaiknya mulai dengan salah satu sampel ini yang dibuat khusus agar berfungsi dengan Copilot Studio:

Full bundle adalah kanvas khusus yang mampu menampilkan semua konten yang kaya dari Copilot Studio. Contoh:
Pengunggahan lokasi dan file adalah kanvas khusus yang mampu mendapatkan lokasi pengguna dan mengirimkannya ke kopilot Copilot Studio . Contoh:

Atau Anda dapat memilih dari contoh kanvas Web Chat lain yang disediakan oleh Bot Framework.

Sesuaikan kanvas menggunakan `styleSetOptions`

Seperti halnya menyesuaikan kanvas default, Anda dapat menggunakan styleSetOptions untuk menyesuaikan kanvas kustom. Semua properti yang dapat disesuaikan tercantum dalam defaultStyleOptions.js. Untuk informasi selengkapnya tentang apa yang dapat Anda sesuaikan dan tampilannya, lihat Kustomisasi Obrolan Web.

Terapkan kanvas kustom Anda

Untuk meng-host kanvas kustom Anda, Terapkan semua file ke aplikasi web.

Bagikan melalui

Menyesuaikan tampilan dan nuansa kopilot

Mengubah nama dan ikon kopilot

Mengambil token titik akhir

Sesuaikan kanvas default (sederhana)

Mengkustomisasi ikon kopilot, warna latar belakang, dan nama

Mengubah ikon kopilot

Mengubah warna latar belakang

Mengubah nama kopilot

Menyesuaikan dan meng-host kanvas obrolan Anda (lanjutan)

Pilih sampel untuk disesuaikan

Sesuaikan kanvas menggunakan `styleSetOptions`

Terapkan kanvas kustom Anda

Mengubah ikon dan nama avatar kopilot

Mengubah warna dan deskripsi kopilot

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Menyesuaikan tampilan dan nuansa kopilot

Mengubah nama dan ikon kopilot

Mengambil token titik akhir

Sesuaikan kanvas default (sederhana)

Mengkustomisasi ikon kopilot, warna latar belakang, dan nama

Mengubah ikon kopilot

Mengubah warna latar belakang

Mengubah nama kopilot

Menyesuaikan dan meng-host kanvas obrolan Anda (lanjutan)

Pilih sampel untuk disesuaikan

Sesuaikan kanvas menggunakan styleSetOptions

Terapkan kanvas kustom Anda

Konten terkait

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Sesuaikan kanvas menggunakan `styleSetOptions`