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 테스트 도구 중앙에서 오른쪽 상단 모서리를 향하는 화살표가 있는 정사각형.를 사용하여 테스트를 수행할 수 있습니다.