添加样式标题栏以聊天机器人自定义webchat.js

时间:2019-11-24 16:26:27

标签: botframework web-chat

如何从Microsoft文档中添加带有聊天机器人名称的标题栏?

<head>
  <style>
    html, body { height: 100% }
    body {
      margin: 0;
      background-color: paleturquoise;
    }

    #webchat {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="webchat" role="main"></div>


    <script>
        (async function () {
        window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({ token }),
          styleOptions: {
            rootHeight: '100%',
            rootWidth: '50%'
          }
        }, document.getElementById('webchat'));
        })()
      </script>

使用styleOptions我可以在bot容器中设置聊天机器人的样式,但是找不到将标题栏添加到主容器的方法,非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

不幸的是,这不是通过styleOptions来完成的,因为它不是一项包含的功能(可以向here提交功能请求,顺便说一句)。

但是,这可以通过一些解决方法来完成。只需从“ webChat”声明开始,将以下代码添加到Web聊天所在的html脚本中即可。

要说明,首先必须将父容器设置为position: relative。这样,我们将创建的子div childHeader可以将position: absolute放置在聊天窗口的顶部。

然后,我们创建div元素,应用样式,甚至添加一个按钮(只是为了表明可能)!按钮chatHeaderBtn附加到chatHeader,按钮本身又附加到父容器(webChat)。

这时,“标题”随页面一起呈现,已固定在聊天窗口中,并且可用于进一步的功能。

<script>
  [...]

  window.ReactDom.render(
    <ReactWebChat
      directLine={ directLine }
    />,
    document.getElementById( 'webchat' )
  );
  document.querySelector( '#webChat > *' ).focus()

  const webChat = document.getElementById( 'webchat' );
  webChat.setAttribute( 'style', 'position: relative' );
  const chatHeader = document.createElement('div')
  chatHeader.setAttribute( 'style', 'position: absolute; color: black; background-color: darkslategray; height: 5%')
  chatHeader.innerText = "I'm a header!";
  const chatHeaderBtn = document.createElement('button')
  chatHeaderBtn.setAttribute( 'style', 'float: right; background-color: red')
  chatHeaderBtn.setAttribute( 'onclick', `alert("Couldn't resist pressing, eh?")`)
  chatHeaderBtn.innerText = "Look!...a button!"
  chatHeader.appendChild(chatHeaderBtn);
  webChat.appendChild(chatHeader);
</script>

enter image description here

希望有帮助!