Adaptive Card 구성

Adaptive Card를 사용하여 채팅 창을 사용자 지정할 수 있습니다. Adaptive Card는 컨택에게 대화형 정보를 제공합니다. 리치 텍스트와 그래픽이 포함된 메시지를 보낼 수 있습니다. 카드를 보는 사용자로부터 피드백을 수집하기 위해 입력 컨트롤과 버튼을 포함할 수도 있습니다.

Adaptive Card라이브 채팅Closed 상담원과 담당자는 실시간으로 상호작용합니다.채팅 메시징Closed 상대방이 언제든지 채팅 메시지를 보내고 답변을 기다리는 비동기 채팅입니다. 채널에 사용할 수 있습니다. 현재 봇 통신에는 Adaptive Card가 사용됩니다. 시스템에서 Adaptive Card가 활성화되지 않은 경우 대체 텍스트가 나타납니다. 이 기능을 활성화하는 데 도움이 필요하면 계정 대표자에게 문의하세요.

채팅 창에 Adaptive Card 표시

  1. 앱 선택기 앱 선택기 아이콘를 클릭하고 선택합니다.ACD.
  2. Digital > 디지털 컨택 포인트로 이동합니다.

  3. 채팅을 클릭합니다.

  4. 구성할 채팅 채널에 대한 사용자 지정을 클릭합니다.

  5. 사용자 정의(CSS 및 JS)까지 아래로 스크롤하고 사용자 정의 CSS 텍스트 상자에 다음 텍스트를 입력합니다.

    
                button.ac-pushButton {
    color: #faac4b; 
    background: white;
    padding: 10px; 
    border: 1px solid; 
    border-radius: 10px; 
    cursor: pointer;

    }

  6. Adaptive Card의 형식과 모양이 만족스러울 때까지 변경하고 사용자 정의합니다.

  7. 사용자 정의 JS 텍스트 상자에 다음 텍스트를 입력합니다.

    
        window.addEventListener('load', function() {
    if (!window.MutationObserver) {
    return;
    }
    var iframeObserver = new MutationObserver(function(){
    var button = document.querySelector('.ac-pushButton');
    if (button) {
    button.onclick = function () {
    alert('roshan');
    };
    }
    });
    iframeObserver.observe(document.body, {
    attributes: true,
    subtree: true,
    childList: false,
    characterData: false
    });
    });
  8. 저장을 클릭합니다.

채팅에 Adaptive Card를 추가한 후에는 카드가 올바르게 표시되는지 테스트해야 합니다. Bot Builder 또는 Microsoft 테스트 도구 중앙에서 오른쪽 상단 모서리를 향하는 화살표가 있는 정사각형.를 사용하여 테스트를 수행할 수 있습니다.