BotFramework-FloatingWebChat/index.html at master · malantin/BotFramework-FloatingWebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div style="text-align: center;">
    <h1 style="color: #0078d7">
        Display and hide the Bot Framework Web Chat <br />
        using Materialize
    </h1>
    <p>
        This sample shows how to display and hide a floating chat windows using <a href="http://materializecss.com">Materialize</a>.
        To make the chat work you need to enable Directline in the Bot Framework developer portal and generate a directline secret. This secret needs to be entered in the bot configuration in the source for this page.
    </p>
    <p>
        Just click the button in the bottom right corner to display the chat. Click the button again to hide the chat windows again.
    </p>
</div>
    <a id="chatButton" class="btn-floating btn-large waves-effect waves-light" style="position: fixed;z-index: 10000;bottom: 1em;right: 1em;background:#0078d7">
        <i class="material-icons">chat</i>
    </a>
    <div id="webchat" class="z-depth-1 scale-transition scale-out" style="background:white; border: 1px solid #0078d7;position: fixed;z-index: 10000;bottom: 6em;right: 1em;width: 400px;height:600px;"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>

        BotChat.App({
            directLine: { secret: 'directlinesecret' },
            user: { id: 'user' },
            bot: { id: 'bot' },
            resize: 'detect',
            formatOptions: { showHeader: true },
            locale: 'de-de'
        }, document.getElementById("webchat"));

        function toggleClassName() {

            console.log('ToggleChat');

            const botchat = document.getElementById('webchat');

            if (botchat.classList.contains('scale-out')) {
                botchat.classList.add('scale-in');
                botchat.classList.remove('scale-out');
            } else {
                botchat.classList.remove('scale-in');
                botchat.classList.add('scale-out');
            }

        }

        document.getElementById('chatButton').addEventListener('click', toggleClassName);

        var header = document.getElementsByClassName('wc-header')[0];
        while (header.firstChild) {
            header.removeChild(header.firstChild);
        }
        var headerSpan = document.createElement('SPAN');
        headerSpan.innerHTML = 'Webchat';
        header.appendChild(headerSpan);

    </script>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>

</html>