WordPress 사이트에 Power Virtual Agent Chat Bot 추가

내previous post에서 사용자 지정 웹 사이트 또는 포털에 채팅 봇을 추가할 때 스타일을 지정하는 방법을 설명했습니다. 하지만 WordPress 사이트에 채팅 봇을 추가할 수 있는지 항상 궁금했고 그 질문에 대한 답을 찾을 수 있었습니다. 그래서 우리가 어떻게 그것을 달성할 수 있는지 봅시다. 이 게시물에서는 WordPress 사이트에 봇을 추가하는 방법만 보여줍니다. 스타일을 이해하려면 myprevious post 를 참조하십시오.

시작하기 전에 Power Virtual Agent을 사용하여 봇을 빌드합니다. 또한 WordPress를 관리했거나 WordPress.com을 사용하는 경우 Business Plan 이상이 필요합니다. 다음으로 Head and Footer Scripts Inserter 플러그인을 설치해야 합니다. 이러한 전제 조건이 있으면 앞으로 나아갈 수 있습니다. 관리되는 WordPress 사이트를 사용하여 변경을 수행할 것입니다.

페이지 구성

기존 페이지를 선택할 수 있지만 이렇게 하기 전에 기존 페이지에 코드를 추가하기 전에 봇을 테스트할 수 있도록 새 페이지를 추가하는 것이 좋습니다.



페이지를 추가하면 애플리케이션이 페이지 편집기로 이동합니다. 이 편집기에서 Visual Editor에서 Code Editor로 전환합니다(아래 참조). 아래 제공된 코드를 추가하고 페이지를 게시/업데이트합니다.

<!-- Chat Bot -->
<button onclick="openChat()" role="openchatbutton" class="open-button">
 <i class="fa fa-4x fa-comments"></i>
</button>
<div role="openchat" id="chatWindow" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
 <div>
  <div id="webchat" role="main"></div>
 </div>
</div> 

스크립트 추가

이제 적절한 스크립트를 추가하겠습니다. 이렇게 하려면 설정 메뉴에서; Script Inserter로 이동합니다(아래 참조).



이 페이지에는 두 개의 섹션이 있는 텍스트 블록이 거의 없습니다. 하나는 헤드 섹션용이고 다른 하나는 바닥글 섹션용입니다. 이제 적절한 텍스트 블록에 다음 스크립트를 추가합니다.

두 번째 텍스트 블록의 헤드 섹션에서 다음 스크립트를 추가합니다.

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

첫 번째 텍스트 블록의 바닥글 섹션에서 다음 스크립트를 추가하고 강조 표시된 코드를 자신의 봇 ID로 바꿉니다.

<script>
    // Only for Power Apps Portals
    const styleOptions = {

        // Add styleOptions to customize Web Chat canvas
        hideUploadButton: true,
        botAvatarInitials: 'TAB',
        userAvatarInitials: 'You',
        backgroundColor: 'rgba(255,255,255,0.85)'
    };

    // Add your BOT ID below 
    var BOT_ID = "YOUR BOT ID";
    var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

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

보시다시피 위의 스크립트에서 봇의 배경색을 정의했지만 봇과 버튼에 더 많은 스타일을 추가하려면 CSS를 추가해야 합니다. 그렇게 하려면 모양 > 사용자 지정으로 이동해야 합니다. 이렇게 하면 사용자 정의 화면이 시작됩니다. 이 화면에서 테마가 허용하는 경우 추가 CSS(또는 테마에 따라 유사한 것) 옵션이 표시되면 클릭합니다. 그러면 CSS 편집기 텍스트 블록이 표시됩니다. 이 텍스트 블록에 다음 css를 추가하고 게시를 클릭합니다.

div[role="form"] {
  background: rgba(255,255,255,0.6);
}  
div[role="status"] {
  border-bottom: 1px solid rgb(230, 230, 230);
} 
div[role="status"] button {
  border-color: rgb(0, 0,0,0.4) !important;
  color: rgb(0, 0, 0) !important;
} 
#webchat {
    position: fixed;
    height: calc(100% - 230px);
    z-index: 9999;
    width: 400px;
    top: 140px;
    right: 30px;
    overflow: hidden;
}
.chat-popup {
    display: none;
}
.open-button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
} 

이 모든 단계가 완료되면 추가한 페이지로 이동하여 오른쪽 상단 모서리에 표시된 버튼을 볼 수 있습니다. 해당 버튼을 클릭하면 봇 창이 표시됩니다. 데모를 확인하려면click here .

라이브 데모를 확인하기 위해 아내의 웹사이트에서 계속 사용할 수 있는 페이지를 유지했습니다. 그래서 http://coffeecompasscreations.com/test-bot/로 이동합니다.

즐겁게 채팅하세요!!