webchat-client/test/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>VDH COVID-19 Chatbot TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet" />

    <style>
        html,
        body {
            height: 100%;
        }
        
        body {
            display: flex;
            flex-direction: column;
            display: grid;
            grid-template-rows: auto 1fr auto;
            max-width: 750px;
            margin: 0 auto;
            font-family: "Noto Sans", sans-serif;
        }
        
        header {
            text-align: center;
            background: #0171a1;
            color: white;
            padding: 15px;
        }
        
        footer {
            text-align: center;
            background: #e2e2e2;
            padding: 10px;
        }
        
        h1 {
            margin: 0;
        }
        
        h2 {
            color: #0171a1;
        }
        
        main {
            padding: 15px;
            flex-grow: 1;
        }
        
        iframe,
        #webchat {
            border: 1px solid black;
            width: 100%;
            height: 100%;
            min-height: 250px;
            resize: vertical;
        }
        
        @media (min-width: 750px) {
            main {
                padding: 15px 0;
            }
        }
        
        .ac-actionSet .ac-pushButton>div {
            overflow: visible !important;
            text-overflow: initial !important;
            white-space: normal !important;
        }
    </style>
</head>

<body>
    <header>
        <h1>VDH COVID-19 Chatbot - TEST</h1>
    </header>

    <main>
        <!-- <iframe src="https://webchat.botframework.com/embed/sov-covid-bot-bot-test/gemini?b=sov-covid-bot-bot-test&s=GFyeU5iB5o0.8tFgmQWVU6Xjzzw2YQJsWjA6YG45tu624DE7bkBTuLo&username=You"></iframe> -->
        <div id="webchat" role="main"></div>
    </main>

    <footer>
        Visit us at
        <a href="https://www.healthvermont.gov/response/infectious-disease/2019-novel-coronavirus">HealthVermont.gov/COVID</a
      >
      or <br />
      Call <a href="tel:802-863-7240">(802) 863-7240</a> to talk to a person
        <br />
    </footer>

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

    <script>
        window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({
                    token: "ZDGxeGJnaXQ.15ZJlWeJYLP5nauEk9SAqtuetXRfnyen7gBk28soqH8",
                }),
                locale: "en-US",
                botAvatarInitials: "VDH",
                userAvatarInitials: "ME",
                styleOptions: {
                    hideUploadButton: true,
                    accent: "#0171a1",
                    botAvatarImage: "https://www.healthvermont.gov/sites/all/themes/vdh/favicon.ico",
                },
            },
            document.getElementById("webchat")
        );
    </script>
</body>

</html>