add own bot html

2023-03-22 10:28:10 +01:00 · 2023-03-22 10:28:10 +01:00 · 0bc6d5cc6e
commit 0bc6d5cc6e
parent a6893613db
3 changed files with 111 additions and 1 deletions
--- a/bot.html
+++ b/bot.html
@ -0,0 +1,110 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+        
+        <!-- This styling is for the canvas demonstration purposes. It is recommended 
+    that style is moved to separate file for organization in larger projects -->
+        <style>
+            html, body {
+                height: 100%;
+            }
+            body {
+                margin: 0;
+            }
+            h1 {
+                font-size: 16px;
+                font-family: Segoe UI;
+                line-height: 20px;
+                color: whitesmoke;
+                display: table-cell;
+                padding: 13px 0px 0px 20px;
+            }
+            .heading {
+                background-color: black;
+                height: 50px;
+            }
+            .main {
+                margin: 18px;
+                border-radius: 4px;
+            }
+
+            div[role="form"]{
+                background-color: white;
+            }        
+            #webchat {
+                position: fixed;
+                height: calc(100% - 50px);
+                width: 100%;
+                top: 50px;
+                overflow: hidden;
+            }
+          </style>
+    </head>
+    <body>
+        <div>
+            <div class="heading">
+
+                <!-- Change the h1 text to change the bot name -->    
+                <h1>Bei Technikfragen Holger fragen</h1>
+
+            </div>
+            <div id="webchat" role="main"></div>
+        </div>    
+      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+      <script>
+            const styleOptions = {
+               // Add styleOptions to customize web chat canvas
+               hideUploadButton: true,
+               botAvatarInitials: 'HO',
+               accent: '#00809d',
+               botAvatarBackgroundColor: "#FFFFFF",
+               botAvatarImage: './images/holger.png',
+            };
+
+            // Add your BOT ID below
+            var BOT_ID = "a5e0b0b2-6ba9-409a-bc86-d421e7d56f91"; 
+
+            var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
+
+            const store = window.WebChat.createStore(
+               {},
+               ({ dispatch }) => next => action => {
+                   if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
+                      dispatch({
+                          meta: {
+                               method: "keyboard",
+                           },
+                           payload: {
+                               activity: {
+                                     channelData: {
+                                          postBack: true,
+                                     },
+                                      //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
+                                      name: 'startConversation',
+                                      type: "event"
+                                 },
+                            },
+                            type: "DIRECT_LINE/POST_ACTIVITY",
+                       });
+                 }
+                 return next(action);
+              }
+           );
+           fetch(theURL)
+                .then(response => response.json())
+                .then(conversationInfo => {
+                    window.WebChat.renderWebChat(
+                        {
+                            directLine: window.WebChat.createDirectLine({
+                                token: conversationInfo.token,
+                            }),
+                            store: store,
+                            styleOptions: styleOptions
+                        },
+                        document.getElementById('webchat')
+                    );
+                })
+                .catch(err => console.error("An error occurred: " + err));
+        </script>
+      </body>
+    </html>
--- a/images/holger.png
+++ b/images/holger.png
--- a/index.html
+++ b/index.html
@ -38,7 +38,7 @@


    <div id="chatbot">
-        <iframe src="https://web.powerva.microsoft.com/environments/Default-5e98bbb4-4a0c-4dae-8254-dcaa73b41da8/bots/new_bot_a5e0b0b26ba9409abc86d421e7d56f91/webchat" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+        <iframe src="./bot.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
    </div>