botframework v4 自定义标题和可最小化的网络聊天

Question

我正在使用这个呈现我的聊天：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

  
        .main {
            margin: 18px;
            border-radius: 4px;
         
        }

        div[role="form"] {
            background-color: black;
        }

        div[role="log"] {
            background: gainsboro;
        }

        div[role="status"] {
            background: darkgray;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 135px);
            z-index: 9999;
            width: 400px;
            top: 132px;
            overflow: hidden;
            border-color: red;
            border-style: dotted;
            visibility:visible;
        }
        
    </style>
</head>
<body>
      
    <div>
        <div id="heading">
            <div id="heading">
                <h1><img src="mylogo.png"> mychat</h1>
            </div>
        </div>
        <div id="webchat" role="main"></div>
    </div>

        <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
        <script>

            

           
            openchat();
         
            function openchat() {
               
                const styleOptions = {
                    userID: 'YOUR_USER_ID',
                    username: 'Web Chat User',
                    botAvatarInitials: '',
                    userAvatarInitials: 'You',
                    bubbleBackground: 'rgba(0, 255, 50, .4)',
                    bubbleFromUserBackground: 'rgba(125, 125, 125, .3)',
                    botAvatarImage: 'mylogo.png'
                };
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            token: '*'
                        }),
                        styleOptions

                    },
                    document.getElementById('webchat')
                );
            }
        </script>

 
</body>
</html>

它工作正常，但现在我需要在公司的网页上发布这个聊天，作为弹出窗口或类似的东西，所以使用以前的脚本是可以的，但我没有选择添加标题到弹出窗口，我还需要添加一个最小化按钮。如何在主页面内为我的网络聊天设置标题和最小化按钮？

发送,

Answer 1

我认为您最好的选择是使用网络聊天团队提供的样本。 minimizable webchat sample 就是一个很好的例子。

botframework v4 自定义标题和可最小化的网络聊天

botframework v4 customize title and minimizable webchat

customization

web-chat

botframework