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

適用対象: SDK v4

この記事では、ご利用のボットに合わせて Web チャットのサンプルをカスタマイズする方法について詳しく説明します。

Web チャットを Web サイトに統合する

Web チャットの概要では、Web チャット コントロールを Web サイトに統合する方法について説明します。

スタイルのカスタマイズ

Web チャット コントロールには、色、サイズ、要素の配置、カスタム要素の追加、ホスティング Web ページの操作など、豊富なカスタマイズ オプションが用意されています。 Web チャット UI をカスタマイズする方法の例をいくつか次に示します。

ファイル内の Web チャットで変更できるすべての設定の完全な一覧を StyleOptions.ts 見つけることができます。 Web チャットの既定値は defaultStyleOptions.ts ファイルにあります

これらの設定では、スタイル セットが生成されます。これは glamor で強化された CSS ルールのセットです。 ファイル内のスタイル セットで生成された CSS スタイルの完全な一覧を createStyleSet.ts 見つけることができます。

Web チャット コンテナーのサイズを設定する

Web チャット コンテナーのサイズを調整するには、 スタイル セットrootHeightrootWidth プロパティを使用します。 次の例では、コントローラーのサイズを示すコンテナーの背景色も設定します。

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

Set Web Chat with root height and root width

警告

ホスティング Web ページでは、Direct Line キーを事前に使用しないでください。 ボットを Web チャットに接続する方法の実稼働埋め込みオプション セクションで説明されているように、トークンを使用します。

チャット バブルのフォントと色を変更する

Web チャット コントロールをホストしている Web ページのスタイルに合わせて、チャット バブルで使用される背景色とフォントをカスタマイズできます。 次のコード スニペットは、その方法を示しています。

Set bubbles font and color

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

ボットとユーザーのアバターを変更する

Web チャットではアバターがサポートされています。アバターは、設定 botAvatarInitials および userAvatarInitials プロパティで styleOptions カスタマイズできます。

set avatar initials

<!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 使用して、コントロールの左側に表示されるボットのアバターイニシャルを設定します。 このプロパティを userAvatarInitials 使用して、右側に表示されるユーザーのアバターイニシャルを設定します。

およびuserAvatarImageプロパティをbotAvatarImage使用して、ボットとユーザーのアバターの画像 URL を指定します。 以下に示すように、コントロールにはイニシャルの代わりにこれらを表示します。

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

set avatar custom

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

最新バージョンの Web チャットでは、Web チャットで組み込みがサポートされないアクティビティまたは添付ファイルをレンダリングすることもできます。 アクティビティと添付ファイルのレンダーは、Redux ミドルウェアの後にモデル化される、カスタマイズ可能なパイプラインを通じて送信されます。 パイプラインは十分に柔軟なので、次のタスクを簡単に行うことができます。

  • 既存のアクティビティ/添付ファイルを装飾する
  • 新しいアクティビティ/添付ファイルを追加する
  • 既存のアクティビティ/添付ファイルを置き換える (または削除する)
  • ミドルウェアをまとめてデイジー チェーン

GitHub リポジトリを添付ファイルとして表示する

たとえば、GitHub リポジトリ カードのデッキを表示する場合は、GitHub リポジトリ用の新しい React コンポーネントを作成し、ミドルウェアとして追加できます。 次の図とコード スニペットは、 customization-card-components サンプルのサンプルからのものです。

既定のメッセージを入力したときの出力を次に示します :sample:github-repository

github repo attachments custom

ヘルプを入力すると、選択できるすべてのカードの選択を取得できます。 これは多くの例の 1 つです。

image attachment custom

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 コンポーネントを追加します。

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 コンポーネントをレンダリングするミドルウェアを作成します。 それ以外の場合は、これは 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);
   }
};

ボットから送信されたアクティビティは、次のようになります。

{
   "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"
         }
      }
   ]
}