0

From Microsoft documentation how to add a header bar with the name of my chat bot?

<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>

With styleOptions I was able to style my chat bot within the bot container, but can't find a way to add a header bar to the main container, help is greatly appreciated.

user2660345
  • 1
  • 1
  • Are you wanting the header to exist within the chat dialog window? Or, above it but attached (appended) to the top? What are you wanting the header bar to display or do? – Steven Kanberg Nov 26 '19 at 10:03
  • I wanted to style the header with styleOptions webchat css insider the container but there is no css for that purpose, instead I found the css for the header in botchat.css and added a div on top with the header class, this added my header. – user2660345 Nov 28 '19 at 14:03

1 Answers1

0

Unfortunately, this can't be accomplished via styleOptions as it's not an included feature (feature requests can be filed here, btw).

However, this can be accomplished with a little work around. Simply add the following code into your html script where Web Chat is located, starting with the 'webChat' declaration.

To explain, first you must set the parent container to position: relative. This allows the child div we will create, childHeader, to take position: absolute placing the div at the top of the chat window.

We then create the div element, apply styling, and even add a button (just to show it's possible)! The button, chatHeaderBtn, is appended to chatHeader which is, itself, appended to the parent container (webChat).

At this point, the "header" renders with the page, is fixed in the chat window, and is accessible for further functionality.

<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

Hope of help!

Steven Kanberg
  • 6,078
  • 2
  • 16
  • 35
  • thank you for the answer, it did not worked for me I don't use react but webchat.js code, I added your code but the header shows in the bottom of the chat container and with a quarter of the size of the container – user2660345 Dec 08 '19 at 16:32
  • Technically, it is working, but needs additional CSS styling. Open your browser's devtools and play with the styling until it does what you want. That's all I did. You can do it, too. – Steven Kanberg Dec 13 '19 at 00:18
  • Also, the code supplied affects the HTML directly. It doesn't matter if you use `window.ReactDOM.render()` or `window.WebChat.renderWebChat`. – Steven Kanberg Dec 13 '19 at 00:18