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

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

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

Web チャット コントロールをご利用の Web サイトに統合するには、概要ページの手順に従います。Follow the instructions on the overview page page to integrate the Web Chat control into your website.

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

Web チャット コントロールの最新バージョンでは、豊富なカスタマイズ オプションが提供されています。色、サイズ、要素の配置を変更したり、カスタムの要素を追加したり、ホスティング Web ページとやりとりしたりすることができます。The latest version of 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 チャット UI のそれらの要素をカスタマイズする方法の例をいくつか示します。Below are several examples of how to customize those elements of the Web Chat UI.

defaultStyleOptions.js ファイルで Web チャットを簡単に変更できるすべての設定の完全なリストを見つけることができます。You can find the full list of all settings that you can easily modify in Web Chat on the defaultStyleOptions.js file.

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

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

styleSetOptions を使用して Web チャット コンテナーのサイズを調整できるようになりました。It is now possible to adjust the size of the Web Chat container using styleSetOptions. 次の例には、Web チャット コンテナーの表示のために、body で background-color が paleturquoise になっています (白い背景のセクション)。The following example has a body background-color of paleturquoise to show the Web Chat container (section with white background).

…
<head>
  <style>
    html, body { height: 100% }
    body {
      margin: 0;
      background-color: paleturquoise;
    }

    #webchat {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="webchat" role="main"></div>
  <script>
    (async function () {
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({ token }),
      styleOptions: {
        rootHeight: '100%',
        rootWidth: '50%'
      }
    }, document.getElementById('webchat'));
    })()
  </script>
…

以下に結果を示します。Here is the result:

Web Chat with root height and root width set

フォントまたは色を変更するChange font or color

チャットの吹き出し内で使用される既定の背景色やフォントを使用するのではなく、ターゲットの Web ページのスタイルに合うようにそれらをカスタマイズできます。Instead of using the default background color and the fonts used inside of the chat bubbles, you can customize those to match the style of the target web page. 以下のコード スニペットによって、ユーザーおよびボットからのメッセージの背景色を変更できます。The code snippet below allows you to change the background color of messages from the user and from the bot.

Screenshot with custom style options

一部のシンプルなスタイル指定を行う必要がある場合、styleOptions によって設定できます。If you need to do some simple styling, you can set them via styleOptions. スタイルのオプションは、直接変更できる定義済みのスタイルのセットであり、Web チャットではそのオプションに基づいて全体のスタイルシートが計算されます。Style options are set of predefined styles that you can modify directly, and Web Chat will compute the whole stylesheet based on it.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: 'YOUR_BOT_SECRET'
               }),

               // Passing 'styleOptions' when rendering Web Chat
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

手動で CSS を変更するChange the CSS manually

色だけでなく、次のようにメッセージのレンダリングに使用されるフォントを変更できます。In addition to colors, you can modify fonts used to render messages:

Screenshot with custom style set

より詳細なスタイル指定については、直接 CSS ルールを設定することで、手動でスタイル セットを変更することもできます。For deeper styling, you can also modify the style set manually by setting the CSS rules directly.

CSS ルールは DOM ツリーの構造に密に結合されるため、Web チャットのより新しいバージョンを使用するには、これらのルールを更新する必要がある可能性があります。Since CSS rules are tightly-coupled to the structure of the DOM tree, there is possibility that these rules need to be updated to work with the newer version of Web Chat.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         // "styleSet" is a set of CSS rules which are generated from "styleOptions"
         const styleSet = window.WebChat.createStyleSet({
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
         });

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

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: 'YOUR_BOT_SECRET'
               }),

               // Passing 'styleSet' when rendering Web Chat
               styleSet
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

ダイアログ ボックス内でボットのアバターを変更するChange the avatar of the bot within the dialog box

最新バージョンの Web Chat では、アバターがサポートされています。これは、styleOptions プロパティで botAvatarInitials および userAvatarInitials を設定することによってカスタマイズできます。The latest version of Web Chat supports avatars, which you can customize by setting botAvatarInitials and userAvatarInitials in the styleOptions prop.

Screenshot with avatar initials
<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: 'YOUR_BOT_SECRET'
               }),
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Web チャットの styleOptions プロパティ内に、botAvatarInitialsuserAvatarInitials が追加されました。Inside Web Chat's styleOptions prop, we added botAvatarInitials and userAvatarInitials:

botAvatarInitials: 'BF',
userAvatarInitials: 'WC'

botAvatarInitials では、左側のアバター内のテキストが設定されます。botAvatarInitials will set the text inside the avatar on the left-hand side. これが false に評価される値に設定されている場合、ボット側のアバターは表示されません。If it is set to falsy value, the avatar on the bot side will be hidden. その一方、userAvatarInitials は右側のアバターのテキストに設定されます。In contrast, userAvatarInitials will set the avatar text on the right-hand side.

アクティビティまたは添付ファイルのレンダリングをカスタマイズする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 リポジトリに対する新しい React コンポーネントを作成して、添付ファイルにミドルウェアとして追加できます。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 a middleware for attachment.

Screenshot with custom GitHub repository attachment
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')
);

完全なサンプルは、customization-card-components サンプルで見つけることができます。The full sample can be found in the customization-card-components sample.

このサンプルでは、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"
         }
      }
   ]
}