웹 채팅 사용자 지정Web Chat customization

적용 대상: SDK v4APPLIES TO: SDK v4

이 문서에서는 봇에 맞게 웹 채팅 샘플을 사용자 지정하는 방법을 자세히 설명합니다.This article details how to customize the Web Chat samples to fit your bot.

웹 사이트에 웹 채팅 통합Integrate Web Chat into your website

채팅 개요 는 웹 채팅 컨트롤을 웹 사이트에 통합 하는 방법을 설명 합니다.The Web Chat overview describes how to integrate the Web Chat control into your website.

스타일 사용자 지정Customizing styles

웹 채팅 컨트롤은 다양 한 사용자 지정 옵션을 제공 합니다. 색, 크기 및 요소의 배치를 변경 하 고, 사용자 지정 요소를 추가 하 고, 호스팅 웹 페이지와 상호 작용할 수 있습니다.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. 다음은 웹 채팅 UI를 사용자 지정 하는 방법에 대 한 몇 가지 예입니다.Below are several examples of how to customize the Web Chat UI.

파일의 웹 채팅에서 수정할 수 있는 모든 설정의 전체 목록을 찾을 수 있습니다 StyleOptions.ts .You can find the full list of all the settings that you can modify in Web Chat in the StyleOptions.ts file. 웹 채팅의 기본값은 DefaultStyleOptions 파일에서 찾을 수 있습니다 .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.

웹 채팅 컨테이너의 크기 설정Set the size of the Web Chat container

웹 채팅 컨테이너의 크기를 조정 하려면 스타일 집합의 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>

루트 높이 및 루트 너비를 사용 하 여 웹 채팅 설정

경고

호스팅 웹 페이지에서 직접 선 키를 일반 시야로 사용 하지 마세요.In the hosting webpage, do not use your Direct Line key in plain sight. 웹 채팅에 봇을 연결 하는 방법의 프로덕션 포함 옵션 섹션에 설명 된 대로 토큰을 사용 합니다.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

웹 채팅 컨트롤을 호스트 하는 웹 페이지 스타일과 일치 하도록 채팅 거품에 사용 되는 배경색 및 글꼴을 사용자 지정할 수 있습니다.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> 

변경 봇 및 사용자 아바타Change bot and user avatars

웹 채팅은 botAvatarInitials 속성에서 및를 설정 하 여 사용자 지정할 수 있는 아바타을 지원 합니다 userAvatarInitials styleOptions .Web 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 하 여 봇 및 사용자 아바타에 대 한 이미지 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

최신 버전의 웹 채팅에서는 웹 채팅이 기본적으로 지원하지 않는 활동이나 첨부 파일을 렌더링할 수도 있습니다.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.

다음은 기본 메시지 ( sample: github-repository) 를 입력할 때 출력 되는 출력입니다.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"
         }
      }
   ]
}