botframework v4 customize title and minimizable webchat

I´m rendering my chat using this:

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

It works fine, but now I need to publish this chat in the webpage of the company, as a popup or something like that, so using the previous script is OK but I have not options to add a title to the popup and also I need to add a minimize button. How I can set title and minimize button to my webchat inside a main page?

Tx,

Solution

I think your best bet going forward is to use the samples provided by the webchat team. The minimizable webchat sample is a good example.