Web チャットのカスタマイズWeb Chat customization

適用対象: SDK v4APPLIES TO: SDK v4

この記事では、ご利用のボットに合わせて Web チャットのサンプルをカスタマイズする方法について詳しく説明します。This article details how to customize the Web Chat samples to fit your bot.

Web チャットを Web サイトに統合するIntegrate Web Chat into your website

Web chat の概要 では、web チャットコントロールを web サイトに統合する方法について説明します。The Web Chat overview describes how to integrate the Web Chat control into your website.

スタイルのカスタマイズCustomizing styles

Web チャットコントロールには、さまざまなカスタマイズオプションが用意されています。色、サイズ、要素の配置、カスタム要素の追加、およびホストしている web ページとの対話を行うことができます。The Web Chat control provides rich customization options: you can change colors, sizes, placement of elements, add custom elements, and interact with the hosting webpage. 次に、Web Chat UI をカスタマイズする方法の例をいくつか示します。Below are several examples of how to customize the Web Chat UI.

ファイルの Web チャットで変更できるすべての設定の完全な一覧を確認でき StyleOptions.ts ます。You can find the full list of all the settings that you can modify in Web Chat in the StyleOptions.ts file. Web チャットの既定値は、 Defaultスタイルのオプションの ts ファイルにあります。The default values for Web Chat can be found in the defaultStyleOptions.ts file

これらの設定では、スタイル セット が生成されます。これは glamor で強化された CSS ルールのセットです。These settings will generate a style set, which is a set of CSS rules enhanced with glamor. ファイルのスタイルセットに生成された CSS スタイルの完全な一覧を確認でき createStyleSet.ts ます。You can find the full list of CSS styles generated in the style set in the createStyleSet.ts file.

Web チャット コンテナーのサイズを設定するSet the size of the Web Chat container

Web チャットコンテナーのサイズを調整するには、 スタイルセットの rootHeight プロパティとプロパティを使用し rootWidth ます。To adjust the size of the Web Chat container, use the style set's rootHeight and rootWidth properties. 次の例では、コントローラーのサイズを表示するようにコンテナーの背景色も設定しています。The following example also sets the container's background color to show the size of the controller.

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

ルートの高さとルートの幅で Web チャットを設定する

警告

ホストしている web ページでは、直接線キーを使用しないようにしてください。In the hosting webpage, do not use your Direct Line key in plain sight. Bot を Web Chat に接続 する方法の「運用環境への埋め込みオプション」セクションで説明されているトークンを使用します。Use a token as explained in the Production embedding option section of how to Connect a bot to Web Chat.

チャットのバブルのフォントと色を変更するChange chat bubble font and color

チャットバブルで使用される背景色とフォントをカスタマイズして、Web チャットコントロールをホストしている web ページのスタイルと一致させることができます。You can customize the background color and the fonts used in the chat bubbles to match the style of the webpage hosting the Web Chat control. 次のコードスニペットは、その方法を示しています。The code snippet below shows how to do it.

バブルのフォントと色を設定する

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body> 

Bot とユーザーアバターを変更するChange bot and user avatars

Web チャットはアバターをサポートしています。これは、 botAvatarInitials プロパティでとを設定することによってカスタマイズできます userAvatarInitials styleOptionsWeb Chat supports avatars, which you can customize by setting botAvatarInitials and userAvatarInitials in the styleOptions property.

アバターの頭文字を設定する

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };

    // Set the avatar options. 
     const avatarOptions = {
         botAvatarInitials: 'BF',
         userAvatarInitials: 'WC'
         };

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet,
      styleOptions: avatarOptions
    }, document.getElementById('webchat'));
    
  </script>
</body>

プロパティを使用して、 botAvatarInitials コントロールの左側に表示される bot のアバターの頭文字を設定します。Use the botAvatarInitials property to set the avatar initials for the bot, which appears on the left-hand side of the control. プロパティを使用して、 userAvatarInitials ユーザーのアバターの頭文字を設定します。これは右側に表示されます。Use the userAvatarInitials property to set the avatar initials for the user, which appear on the right-hand side.

プロパティとプロパティを使用して、 botAvatarImage userAvatarImage bot とユーザーアバターのイメージ url を指定します。Use the botAvatarImage and userAvatarImage properties to provide image URLs for the bot and user avatars. 次に示すように、コントロールによってこれらがイニシャルの代わりに表示されます。The control will display these in place of the initials, as shown below.

const avatarOptions = {
   botAvatarImage: '<URL to your bot avatar image>',
   botAvatarInitials: 'BF',
   userAvatarImage: '<URL to your user avatar image>',
   userAvatarInitials: 'WC'
};

アバターのカスタム設定

アクティビティまたは添付ファイルのレンダリングをカスタマイズするCustom rendering activity or attachment

最新バージョンの Web チャットでは、Web チャットで組み込みがサポートされないアクティビティまたは添付ファイルをレンダリングすることもできます。With the latest version of Web Chat, you can also render activities or attachments that Web Chat does not support out-of-the-box. アクティビティと添付ファイルのレンダーは、Redux ミドルウェアの後にモデル化される、カスタマイズ可能なパイプラインを通じて送信されます。Activities and attachments render are sent thru a customizable pipeline that modeled after Redux middleware. パイプラインは十分に柔軟なので、次のタスクを簡単に行うことができます。The pipeline is flexible enough that you can do the following tasks easily:

  • 既存のアクティビティ/添付ファイルを装飾するDecorate existing activities/attachments
  • 新しいアクティビティ/添付ファイルを追加するAdd new activities/attachments
  • 既存のアクティビティ/添付ファイルを置き換える (または削除する)Replace existing activities/attachments (or remove them)
  • ミドルウェアをまとめてデイジー チェーンDaisy chain middleware together

GitHub リポジトリを添付ファイルとして表示するShow GitHub repository as an attachment

たとえば、GitHub リポジトリカードのデッキを表示する場合は、GitHub リポジトリ用に新しい対応コンポーネントを作成し、ミドルウェアとして追加できます。For example, if you want to display a deck of GitHub repository cards, you can create a new React component for the GitHub repository and add it as middleware. 次のイメージとコードスニペットは、「 カスタマイズカードコンポーネントのサンプル」から抜粋したものです。The following image and code snippets are from the sample the customization-card-components sample.

既定のメッセージ (サンプル: github リポジトリ) を入力すると、次の出力が表示されます。The following is the output when you enter the default message: sample:github-repository.

github リポジトリ添付ファイルカスタム

[ ヘルプ ] を入力すると、選択できるすべてのカードの選択を取得できます。If you enter help you obtain the selection of all the cards you can choose. 次に例をいくつか示します。This is one of many examples:

画像添付ファイルのカスタム

import ReactWebChat from 'botframework-webchat';
import ReactDOM from 'react-dom';

// Create a new React component that accept render a GitHub repository attachment
const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

// Creating a new middleware pipeline that will render <GitHubRepositoryAttachment> for specific type of attachment
const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

ReactDOM.render(
   <ReactWebChat
      // Prepending the new middleware pipeline
      attachmentMiddleware={attachmentMiddleware}
      directLine={window.WebChat.createDirectLine({ token })}
   />,
   document.getElementById('webchat')
);

このサンプルでは、GitHubRepositoryAttachment と呼ばれる新しい React コンポーネントを追加します。In this sample, we are adding a new React component called GitHubRepositoryAttachment:

const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

その後、ボットでコンテンツの種類 application/vnd.microsoft.botframework.samples.github-repository の添付ファイルを送信するときに、新しい React コンポーネントをレンダリングするミドルウェアを作成します。Then, we create a middleware that will render the new React component when the bot sends an attachment of content type application/vnd.microsoft.botframework.samples.github-repository. それ以外の場合は、これは next(card) を呼び出すことにより、ミドルウェア上で続行されます。Otherwise, it will continue on the middleware by calling next(card).

const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

ボットから送信されたアクティビティは、次のようになります。The activity sent from the bot looks like the following:

{
   "type": "message",
   "from": {
      "role": "bot"
   },
   "attachmentLayout": "carousel",
   "attachments": [
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-WebChat"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-Emulator"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-DirectLineJS"
         }
      }
   ]
}