Bagikan melalui

Sesuaikan tampilan dan nuansa agen

  • Artikel

Kanvas agen Anda menentukan tampilan dan nuansanya. Anda dapat menyesuaikan kanvas dengan dua cara, tergantung pada kompleksitas perubahan yang diinginkan:

  • Sesuaikan kanvas default dengan gaya JavaScript dalam kode HTML situs web tempat Anda menyebarkan agen Anda.
    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 disesuaikan.

Penting

Anda dapat menginstal dan menggunakan kode sampel yang disertakan dalam artikel ini hanya untuk digunakan dengan 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.

Setelah Anda membuat dan menerbitkan agen, pelanggan Anda dapat menggunakan kanvas Obrolan Web agen untuk berinteraksi dengannya.

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

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

Mengubah nama dan ikon agen

Penting

Jika agen Anda tersambung ke Multisaluran untuk Customer Service, namanya ditentukan oleh properti Nama tampilan di pendaftaran portal Microsoft Azure.

Anda dapat mengubah nama dan ikon agen. Ini akan memengaruhi ikon di semua saluran tempat Anda menerbitkan agen Anda.

  1. Di menu navigasi, di bawah Pengaturan, pilih Detail.

  2. Ubah nama dan ikon agen. Tinjau rekomendasi tentang Microsoft Teams format ikon.

  3. Pilih Simpan untuk menerapkan perubahan Anda.

    Panel detail agen memungkinkan Anda mengubah nama dan ikon.

Penting

Setelah memperbarui ikon agen Anda, mungkin diperlukan waktu hingga 24 jam agar ikon baru muncul di mana-mana.

Ambil titik akhir token

Untuk menyesuaikan kanvas Anda, baik itu kanvas default atau kanvas kustom yang Anda sambungkan, Anda perlu mengambil detail agen Anda.

  1. Di menu navigasi di bawah Pengaturan, pilih Saluran.

  2. Pilih Aplikasi seluler.

    Cuplikan layar ubin saluran aplikasi seluler.

  3. Di samping Titik Akhir Token, pilih Salin.

    Screenshot id token titik akhir.

Sesuaikan kanvas default (sederhana)

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

Pertama, Anda perlu mengonfigurasi tempat Anda menyebarkan kanvas agen Anda.

  1. Buat dan publikasikan agen.

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

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

  3. Dalam file index.html yang Anda buat, masukkan titik akhir token Anda di baris const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.

  4. Buka index.html menggunakan browser modern (misalnya,) Microsoft Edge untuk membuka agen di kanvas kustom.

  5. Uji agen untuk memastikan Anda menerima respons darinya dan berfungsi dengan benar.

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

Sesuaikan ikon agen, warna latar belakang, dan nama

Setelah Anda mendapatkan kanvas yang disesuaikan bekerja dengan agen Anda, Anda dapat membuat perubahan.

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 agen

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

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

Mengubah warna latar belakang

  1. Perbarui file index.html dengan kode sampel berikut:

    const styleOptions = {
  backgroundColor: 'lightgray'
};

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

Mengubah nama agen

  1. Perbarui <h1> teks dalam file index.html dengan yang berikut ini:

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

  2. Ubah teks menjadi apa pun yang ingin Anda hubungi agen. 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 agen 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 yang dibuat khusus untuk digunakan Copilot Studio:

  • Bundel penuh adalah kanvas khusus yang mampu menampilkan semua konten kaya dari Copilot Studio. Contoh:

    Kanvas kustom bundel penuh.

  • Lokasi dan pengunggahan file adalah kanvas khusus yang mampu mendapatkan lokasi pengguna dan mengirimkannya ke Copilot Studio agen. Contoh:

    Lokasi dan Canvas kustom pengunggahan file.

Atau Anda dapat memilih dari contoh kanvas Obrolan Web lainnya 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.

Konten terkait