botframework v4自定义标题和最小化webchat_Botframework_Customization_Web Chat

botframework v4自定义标题和最小化webchat

botframework

botframework v4自定义标题和最小化webchat,botframework,customization,web-chat,Botframework,Customization,Web Chat,我使用以下方式呈现聊天： <!DOCTYPE html> <html> <head> <style> html, body { height: 100%; } body { margin: 0; } .main { margin: 18px; border-

我使用以下方式呈现聊天：

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


html，正文{
身高：100%；
}
身体{
保证金：0；
}
梅因先生{
利润率：18px；
边界半径：4px；
}
div[role=“form”]{
背景色：黑色；
}
div[role=“log”]{
背景：gainsboro；
}
div[role=“status”]{
背景：暗射线；
}
#网络帽{
位置：固定；
高度：计算（100%-135px）；
z指数：9999；
宽度：400px；
顶部：132px；
溢出：隐藏；
边框颜色：红色；
边框样式：虚线；
能见度：可见；
}
数位男女
openchat（）；
函数openchat（）{
常量样式选项={
userID:“您的用户ID”，
用户名：“网络聊天用户”，
Botrinitials:“”，
UserAvatariInitials:'你'，
泡泡背景：“rgba（0,255,50,4）”，
bubbleFromUserBackground:'rgba（125125125.3）'，
BoTavariage:'mylogo.png'
};
window.WebChat.renderWebChat(
{
directLine:window.WebChat.createDirectLine({
标记：'*'
}),
样式选项
},
document.getElementById（'webchat'）
);
}

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

Tx，

我认为您最好使用webchat团队提供的样本。这是一个很好的例子