챗봇 대화 자동 시작

아티클
04/03/2024

중요

Power Virtual Agents 기능 및 특징은 생성 AI에 대한 막대한 투자와 Microsoft Copilot 전반의 향상된 통합에 따라 이제 Microsoft Copilot Studio의 일부가 되었습니다.

문서 및 교육 콘텐츠를 업데이트하는 동안 일부 문서와 스크린샷에서는 Power Virtual Agents을 참조할 수 있습니다.

사용자와 대화를 시작하도록 봇을 구성할 수 있습니다. 또한 사용자 지정 인사말을 봇의 모양과 느낌에 대한 사용자 지정과 결합할 수 있습니다.

중요

봇이 대화를 시작하게 하면 분석에 나타나며 세션 수가 증가합니다.

봇 사용자가 봇과 대화하지 않는 경우(예: 페이지를 로드하지만 봇에게 아무 것도 요청하지 않음) 세션이 참여하지 않은 세션으로 표시됩니다. 이는 분석에 영향을 줄 수 있습니다.

웹 앱
Teams

기본적으로 Microsoft Copilot Studio로 만들어지고 웹 사이트에 게시된 챗봇은 인사말 없이 로드되며 사용자가 대화를 시작할 때까지 수동적으로 기다립니다.

그러나 사용자 지정 CSS 및 JavaScript 코드를 사용하여 봇이 로드될 때 봇이 자동으로 대화를 시작하도록 할 수 있습니다. 예를 들어 봇이 로드되자마자 봇이 "안녕하세요, 가상 에이전트인 Botty입니다"라고 말하도록 할 수 있습니다.

먼저 인사말을 트리거하는 인수가 포함된 사용자 지정 캔버스를 배포해야 합니다. 기본적으로 사용자 지정 캔버스는 기본 시스템 인사말 토픽을 호출합니다. 그러나 기본 시스템 인사말 토픽을 새 토픽으로 전환해야 하지만 인사말로 사용할 새 토픽을 만들 수 있습니다.

중요

Microsoft Copilot Studio 제품과 함께 사용하기 위해서만 이 문서에 포함된 샘플 코드를 설치하고 사용할 수 있습니다. 샘플 코드는 "있는 그대로" 라이선스가 부여되며 서비스 수준 약정 또는 지원 서비스에서 제외됩니다. 이 문서의 사용으로 발생하는 위험은 귀하의 책임입니다.

Microsoft는 어떠한 명시적 보증, 보장 또는 조건을 제공하지 않으며 상품성, 특정 목적에의 적합성 및 비침해를 비롯한 모든 묵시적 보증을 제외합니다.

토큰 엔드포인트 검색

캔버스가 기본 캔버스인지 또는 사용자 지정 캔버스인지에 관계없이 캔버스를 사용자 지정하려면 봇 세부 정보를 검색해야 합니다.

탐색 메뉴에서 설정 아래의 채널을 선택합니다.
모바일 앱을 선택합니다.
토큰 엔드포인트 옆에 있는 복사를 선택합니다.

기본 캔버스 사용자 지정(단순)

몇 가지 단순한 CSS 및 JavaScript 스타일 지정 옵션으로 채팅 캔버스의 모습을 구성할 수 있습니다.

먼저 봇 캔버스를 배포할 위치를 구성해야 합니다.

봇 만들기 및 게시.

아래 HTML 코드를 복사하여 붙여 넣고 index.html로 저장하십시오.
아래 코드를 복사하여 w3schools.com HTML 체험 편집기에 붙여 넣을 수도 있습니다. 여전히 토큰 엔드포인트를 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title> 
    <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }

    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT token endpoint below
        var theURL = "<BOT TOKEN ENDPOINT>";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

자신이 만든 index.html 파일의 var theURL = "<YOUR TOKEN ENDPOINT>"; 줄에 토큰 엔드포인트를 입력합니다.
최신 브라우저(예: Microsoft Edge)를 사용하여 index.html을 열고 사용자 지정 캔버스에서 봇을 엽니다.
봇을 테스트하여 봇으로부터 응답을 받고 있으며 제대로 작동하는지 확인하십시오.

문제가 발생하면 봇을 게시했는지, 토큰 엔드포인트가 올바른 위치에 삽입되었는지 확인하세요. var theURL = "<YOUR TOKEN ENDPOINT>" 줄에서 등호(=) 뒤에 있어야 하며, 큰 따옴표(") 안에 있어야 합니다.

봇의 기본 인사말 변경

index.html 파일의 코드는 봇이 로드될 때 토픽이 자동으로 호출되도록 합니다. 기본적으로 시스템 인사말 토픽을 호출합니다. 새 토픽을 만들고 기본 시스템 인사말 토픽을 새 토픽으로 전환할 수도 있습니다.

두 경우 모두 평소처럼 호출하고 싶은 토픽을 변경하십시오.

새 인사말 토픽을 수정하거나 생성하는 경우 사용자가 봇(또는 "Virtual Agent")과 대화하고 있다는 일종의 식별을 포함하여 사용자가 인간과 대화하고 있다고 생각하지 않도록 하는 것이 가장 좋습니다.

시스템 인사말 토픽을 수정하여 index.html 코드를 편집할 필요가 없도록 하는 것이 좋습니다.

시스템 인사말 토픽 수정(권장)

탐색 메뉴에서 토픽을 선택한 다음 인사말 토픽 행을 선택합니다.
메시지 노드 내부의 텍스트를 편집합니다. 또한 추가 노드를 추가 또는 삭제할 수 있습니다.
저장을 선택합니다.
봇 게시.

이제 봇의 사용자 지정 캔버스를 배포한 웹 페이지로 이동하여 봇을 테스트할 수 있습니다. 인사말 토픽을 자동으로 표시하여 봇이 대화를 시작하는 것을 볼 수 있습니다.

새 사용자 토픽 만들기

경고

사용자 토픽을 사용하여 대화를 시작하면 청구된 세션이 증가할 수 있습니다. 청구 세션은 고객과 봇 간의 상호 작용이며 하나의 소비 단위를 나타냅니다. 청구된 세션은 사용자 토픽이 트리거될 때 시작됩니다. 자세한 내용은 청구된 세션 정보 분석 항목을 참조하십시오.

탐색 메뉴에서 토픽을 선택합니다.
새 토픽을 선택하고 이름을 지정하십시오.
메시지 노드 내에 텍스트를 추가합니다.
메시지 편집이 완료되면 저장을 선택합니다.
탐색 메뉴에서 토픽을 선택한 다음 인사말 토픽 행을 선택합니다.
인사말 토픽에서 메시지 노드를 삭제합니다.
봇을 사용자 토픽으로 자동 전환하려면 노드 추가(+)를 선택해 노드를 추가한 다음 다른 토픽으로 이동을 선택합니다.
플라이아웃 메뉴에서 위에서 만든 사용자 토픽을 선택하십시오.
메시지 편집이 완료되면 저장을 선택합니다.
봇 게시.

이제 봇의 사용자 지정 캔버스를 배포한 웹 페이지로 이동하여 봇을 테스트할 수 있습니다. 새 토픽을 자동으로 표시하여 봇이 대화를 시작하는 것을 볼 수 있습니다.

챗봇 대화 자동 시작

토큰 엔드포인트 검색

기본 캔버스 사용자 지정(단순)

봇의 기본 인사말 변경

시스템 인사말 토픽 수정(권장)

새 사용자 토픽 만들기

봇의 기본 인사말 변경

피드백

피드백

추가 리소스