首页 > 解决方案 > 自适应卡片 Action.OpenURL 跟踪

问题描述

自适应卡 1.2 / 1.3

问题

这与我们在 Adaptive Cards 中的Action.OpenURL按钮有关。当您向用户显示带有一些链接的自适应卡片 (Action.OpenURL) 时,它只是在新选项卡中打开该 URL。Bot 不知道链接是否被点击,这使得事件的跟踪难以处理,特别是在我们想要记录哪个链接被点击以获取特定话语的情况下。

任何人都可以帮助我们,有什么更好的方法来处理这个问题。

标签: adaptive-cardsweb-chatbotframeworkwebchatjs

解决方案


我相信自适应卡片中发生了一些变化,不再允许你做这样的事情。但这是我发现的东西,但不知道它是否真的有效。

<script type="text/babel" data-presets="es2015,react,stage-3">
  (async function () {
    const { ReactWebChat } = window.WebChat;
    const cardActionMiddleware = () => next => async ( { cardAction } ) => {
      if (cardAction?.type === 'openUrl') {
        const urlButtonClickEvent = new Event('urlButtonClick')
        urlButtonClickEvent.data = cardAction.value;
        window.dispatchEvent(urlButtonClickEvent);
      }
      return next( { cardAction } );
    }
    const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
    const { token } = await res.json();
    window.ReactDOM.render(
      <ReactWebChat
        directLine={ window.WebChat.createDirectLine({ token }) }
        cardActionMiddleware={cardActionMiddleware}
      />,
      document.getElementById('webchat')
    );
    document.querySelector('#webchat > *').focus();
    window.addEventListener( 'urlButtonClick', ( { data } ) => {
      store.dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
          name: 'URL_BUTTON_CLICK',
          value: data
        }
      })
    } );
  })().catch(err => console.error(err));
</script>

推荐阅读