Configurar elementos de Adaptive Card

Você pode usar elementos de Adaptive Card para personalizar uma janela de chat. Elementos de Adaptive Card exibem informações interativas para contatos. Eles permitem que você envie mensagens com rich text e gráficos. Você também pode incluir controles e botões de entrada para coletar feedback dos usuários que visualizam o cartão.

Elementos de Adaptive Card estão disponíveis para canais de Chat ao Vivo Agentes e contatos interagem em tempo real e Mensagens de Chat Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Atualmente, elementos de Adaptive Card são usados para comunicação de bots. Se elementos de Adaptive Card não estiverem habilitados para seu sistema, um texto alternativo será exibido. Entre em contato com o Representante de contas para obter ajuda para habilitar esse recurso.

Mostrar elementos de Adaptive Card na janela de chat

1. Clique no seletor de aplicativo e selecioneACD.

2. Vá para Digital >Pontos de Contato Digital.

3. Clique em bate-papo.

4. Clique em Personalização para o canal de chat que você quer configurar.

5. Role a tela para baixo até Personalização (CSS e JS) e digite o seguinte texto na caixa CSS personalizado:

   
               button.ac-pushButton {

   color: #faac4b; 

   background: white;

   padding: 10px; 

   border: 1px solid; 

   border-radius: 10px; 

   cursor: pointer;

   }

6. Faça alterações e personalizações até ficar satisfeito com o formato e a aparência do Adaptive Card.

7. Digite o seguinte texto na caixa JS personalizado:

   
       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. Clique em Save.

Depois de adicionar elementos de Adaptive Card a um chat, você deve testá-los para ter certeza de que estão aparecendo corretamente. Você pode testá-los usando o Bot Builder ou a Microsoftferramenta de teste .