1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > Contoso Sample Web Chat</ title >
5+ <!-- This styling is for the canvas demonstration purposes. It is recommended
6+ that style is moved to separate file for organization in larger projects -->
7+ < style >
8+ html , body {
9+ height : 100% ;
10+ }
11+
12+ body {
13+ margin : 0 ;
14+ }
15+
16+ h1 {
17+ font-size : 16px ;
18+ font-family : Segoe UI;
19+ line-height : 20px ;
20+ color : whitesmoke;
21+ display : table-cell;
22+ padding : 13px 0px 0px 20px ;
23+ }
24+
25+ .heading {
26+ background-color : grey;
27+ height : 50px ;
28+ }
29+
30+ .main {
31+ margin : 18px ;
32+ border-radius : 4px ;
33+ }
34+
35+ div [role = "form" ] {
36+ background-color : mediumpurple;
37+ }
38+
39+ # webchat {
40+ position : fixed;
41+ height : calc (100% - 50px );
42+ width : 100% ;
43+ top : 50px ;
44+ overflow : hidden;
45+ }
46+
47+ </ style >
48+ </ head >
49+ < body >
50+ < div >
51+ < div class ="heading ">
52+
53+ <!-- Change the h1 text to change the bot name -->
54+ < h1 > Matt Bot</ h1 >
55+
56+ </ div >
57+ < div id ="webchat " role ="main "> </ div >
58+ </ div >
59+ < script src ="https://cdn.botframework.com/botframework-webchat/latest/webchat.js "> </ script >
60+ < script >
61+ const styleOptions = {
62+ // Add styleOptions to customize web chat canvas
63+ hideUploadButton : true ,
64+ sendBoxButtonColor : 'red' ,
65+ botAvatarImage : 'https://maxcdn.icons8.com/Share/icon/ios7/Industry/bot1600.png'
66+ } ;
67+
68+ const styleSet = window . WebChat . createStyleSet ( {
69+ bubbleBackground : 'rgba(0, 0, 255, .1)' ,
70+ bubbleFromUserBackground : 'rgba(0, 255, 0, .1)'
71+ } ) ;
72+
73+ styleSet . textContent = Object . assign (
74+ { } ,
75+ styleSet . textContent ,
76+ {
77+ fontFamily : '\'Comic Sans MS\', \'Arial\', sans-serif' ,
78+ fontWeight : 'bold'
79+ }
80+ ) ;
81+
82+ // Add your BOT ID below
83+ var BOT_ID = "097b7cbb-0604-459c-8e42-de03daa68596" ;
84+
85+ var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID ;
86+
87+ //Set this variable to the encrypted token string. In real use, the token will need to extracted from the users store/cookie
88+ var theToken = "ABC123" ;
89+
90+ const store = window . WebChat . createStore (
91+ { } ,
92+ // This code sends the encryted token to PVA. Set the varToken value to the encryted Token the user holds.
93+ ( { dispatch } ) => next => action => {
94+ if ( action . type === "DIRECT_LINE/CONNECT_FULFILLED" ) {
95+ dispatch ( {
96+ type : 'WEB_CHAT/SEND_EVENT' ,
97+ payload : {
98+ name : 'pvaSetContext' ,
99+ value : {
100+ "tokenValue" : "" + theToken + ""
101+ }
102+ }
103+ } ) ;
104+ }
105+ return next ( action ) ;
106+ }
107+ ) ;
108+ fetch ( theURL )
109+ . then ( response => response . json ( ) )
110+ . then ( conversationInfo => {
111+ window . WebChat . renderWebChat (
112+ {
113+ directLine : window . WebChat . createDirectLine ( {
114+ token : conversationInfo . token ,
115+ } ) ,
116+ store : store ,
117+ styleOptions : styleOptions
118+ } ,
119+ document . getElementById ( 'webchat' )
120+ ) ;
121+ } )
122+ . catch ( err => console . error ( "An error occurred: " + err ) ) ;
123+ </ script >
124+ < style >
125+
126+ </ style >
127+ </ body >
128+ </ html >
0 commit comments