에이전트 사용자 지정

웹 사이트에 대한 에이전트를 만들면 호스팅 사이트의 콘텐츠를 사용하여 응답을 생성합니다. Microsoft Dataverse는 사이트 콘텐츠 및 구성된 테이블을 인덱싱합니다. Copilot Studio는 인덱싱된 콘텐츠와 테이블을 요약하여 응답을 생성합니다.

인증된 사이트 사용자는 자신의 웹 역할에 맞게 맞춤화되고 요약된 답변을 받을 수 있습니다. 다음 단계에 따라 데이터를 구체화하여 인증된 사이트 사용자에 대한 콘텐츠 모델을 개선합니다.

1. Power Pages에서 작업 영역 설정으로 이동합니다.

2. Copilot에서 에이전트 추가를 선택합니다.

3. 데이터 세부 조정에서 변경을 선택합니다.

4. 테이블 조회 컨트롤 선택을 선택하여 테이블을 선택하거나 선택을 취소합니다.

   • 이 섹션에서는 여러 테이블을 선택할 수 있습니다. 선택한 모든 테이블이 사이트에서 사용되는지 확인합니다.
   • 후속 페이지에서 테이블이 사용되는 페이지를 지정하여 인용 URL을 생성합니다.

5. 다음을 선택합니다.

6. 테이블 선택에서 선택하려는 열과 페이지 링크가 포함된 테이블을 선택합니다. 테이블은 여러 줄로 된 열이 하나 이상 있는 경우에만 나타납니다.

   한번에 하나의 테이블만 선택할 수 있습니다.

7. 페이지 링크 추가에서 테이블이 사용되는 페이지를 선택합니다.

   참고

   • 올바른 페이지를 선택했는지 확인합니다. 그렇지 않으면 봇이 답변에 대한 잘못된 인용 URL을 제공합니다.
   • 페이지는 쿼리 문자열 매개 변수로 id를 사용해야 합니다. 다른 매개 변수 이름을 사용하면 인용 URL이 제대로 작동하지 않습니다.

8. 열 선택에서 페이지에 사용되는 열을 선택합니다. 여러 줄 텍스트가 있는 열만 선택할 수 있습니다.

9. 다음을 선택하고 선택 사항을 확인하세요.

10. 저장을 선택하여 변경 내용을 저장합니다.

에이전트 모양 사용자 지정

기본 Cascading Style Sheet (CSS) 클래스를 재정의하여 에이전트의 스타일을 사용자 지정할 수 있습니다. 이렇게 하려면 헤더 템플릿에 style 요소를 추가하고 다음 단계에 따라 값을 재정의합니다.

1. 사이트의 코드 편집기를 엽니다.

2. Explorer 탐색에서 web-templates 폴더를 확장합니다.

3. Header.html을 엽니다.

4. style 또는 script 요소를 추가합니다.

   

5. 적절한 스타일을 재정의합니다.

에이전트 위젯

에이전트 축소 아이콘:

.pva-embedded-web-chat-widget {
    background-color: #484644;
    border: 1px solid #FFFFFF;
}

도구 설명:

.pva-embedded-web-chat-widget .pva-embedded-web-chat-widget-tooltip-text {
    background: white;
    color: #323130;
}

아이콘 이미지:

<script>
document.addEventListener('DOMContentLoaded', function() {
   var buttons = document.getElementsByClassName("pva-embedded-web-chat-widget");
    buttons[0].innerHTML = '<img src="<image URL>" height= "70px" width = "70px" />';
}, false);
</script>

에이전트 요소

이 섹션의 CSS 샘플은 다음 스크린샷에서 번호가 매겨진 각 챗봇 요소를 사용자 지정하는 방법을 보여주는 예제를 제공합니다.

1. 헤더

.pages-chatbot-header
{
    background: #77a145;
    color: #ffffff;
}

2. 높이 및 너비 설정

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 25%;
    max-width: 400px;
    max-height: 740px;
}

3. 에이전트 창

.pva-embedded-web-chat-window {
    background: white;
}

4. 에이전트의 말풍선

배경색:

.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    background-color: #77a145 !important;
    border-radius: 5px !important;
}

텍스트 색:

.webchat__bubble:not(.webchat__bubble--from-user) p {
    color: #ffffff;
}

5. 사용자의 버블

배경색:

.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
    background-color: #797d81 !important;
    border-radius: 5px !important;
}

텍스트 색:

.webchat__bubble.webchat__bubble--from-user p {
    color: #ffffff;
}

6. 참조 링크

.webchat__link-definitions__badge {
    color: blue !important;
}

.webchat__link-definitions__list-item-text {
    color: blue !important;
}

.webchat__render-markdown__pure-identifier {
    color: blue !important;
}

7. 개인 정보 메시지 설정

배경색:

.pva-privacy-message {
    background: #797d81;
}

텍스트 색:

.pva-privacy-message p {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
}

관련 정보

• Power Pages의 AI 기반 및 Copilot 기능 개요
• Bing Search를 사용하여 공개 데이터에서 답변 생성
• 책임 있는 AI: 사이트 에이전트에 대한 FAQ