I changed my code from webchat 3 to webchat 4 and also changed style options and so some other stuff. Everything works fine....just the web-chat rendering creates a problem. Here is my code:
(async function() {
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
headers: {
Authorization: `Bearer [MYBEARER]`,
},
method: 'POST'
});
const { token } = await res.json();
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
//console.log(action);
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
const styleOptions = {
botAvatarInitials: 'EY',
userAvatarInitials: 'YOU'
};
const {
createCognitiveServicesSpeechServicesPonyfillFactory,
createDirectLine,
renderWebChat
} = window.WebChat;
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000; background-color:#252525; border:1px solid #252525;'><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer; background-color:#FFE600;'></div></div>";
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
store,
userID: `You`,
username: 'Web Chat User',
locale: 'en-US',
language: 'en-US',
styleOptions
}, document.getElementById('botDiv'));
document.querySelector('#botDiv > *').focus();
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}()).catch(err => console.error(err));;I also have in my header all js and css links:
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/botchatey.css">
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>HERE IS THE PROBLEM: The whole layout runs perfectly when I remove the "window.WebChat.renderWebChat" function. I can max- and minimize the chatwindow which I cerate in the div-outerHTML.
When I add the renderWebChat function it seems that the excapsulated DIV with the id "botTitleBar" gets eaten and is not showing up. If I press F12 at the running solution I cannot see this DIV in the code running. I spent hours on this now. Any help is highly welcome! Please!
I solved the problem by my own. Took me some time but I think it is interesting for others in can you also change from webchat 3 to webchat 4. I have a icon on my web-side which I want to show when the site is opened. When I click on the icon the webchat window opens. When I click on the header of the webchat window, the window collapses and the icon is shown again. Here are the parts of my code needed. The style part:
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#botDiv {
width: 400px;
height: 0px;
margin: 10px;
position: fixed;
bottom: 0;
right: 0;
z-index: 1000;
border: 1px solid #252525;
display: none;
}
#botDiv>* {
height: 100%;
width: 100%;
}
#webchat>* {
height: 100%;
width: 100%;
}
#botTitleBar {
cursor: pointer;
background-color: #252525;
height: 20px;
width: auto;
color: #252525;
}
#ContainerDiv {
margin: auto;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
}
</style>
The divs for the icon and the chat-window which I place into my footer:
<div id="botDiv">
<div id="botTitleBar">Click here to close chat window!</div>
<div id="webchat"></div>
</div>
<div class="ContainerDiv" id="ContainerDiv">
<img id="chaticon" src="@Url.Content("/images/chat.png")" style="float: right;" role="main"/>
</div>
And finally here is the javascript function:
(async function() {
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
headers: {
Authorization: `Bearer <YOUR DIRECTLINE SECRET HERE>`,
},
method: 'POST'
});
const { token } = await res.json();
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
//console.log(action);
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
const styleOptions = {
botAvatarInitials: 'EY',
userAvatarInitials: 'YOU',
hideUploadButton: true,
backgroundColor: '#252525',
userAvatarBackgroundColor: '#FFE600',
botAvatarBackgroundColor: 'FFE600',
sendBoxBackground: 'Black',
sendBoxTextColor: 'White'
};
const {
createCognitiveServicesSpeechServicesPonyfillFactory,
createDirectLine,
renderWebChat
} = window.WebChat;
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
store,
userID: `You`,
username: 'Web Chat User',
locale: 'en-US',
language: 'en-US',
styleOptions
}, document.querySelector("#botDiv #webchat")
);
document.querySelector('#webchat > *').focus();
document.querySelector( 'body' ).addEventListener( 'click', function (e) {
const botDiv = document.getElementById("botDiv");
const webchat = document.getElementById("webchat" );
const chaticon = document.getElementById("chaticon" );
const botTitleBar = document.getElementById("botTitleBar");
e.target.matches = e.target.matches || e.target.msMatchesSelector;
const parent = e.srcElement.parentElement;
if (parent.matches( '#botDiv' ) && e.target.matches( '#botTitleBar' ) ) {
botDiv.style.height = '0px';
botDiv.style.display = "none";
chaticon.style.display = "initial";
}
else if ( e.target.matches( '#chaticon') ) {
document.getElementById( "botDiv" ).style.height = '500px';
botDiv.style.display = "block";
botDiv.appendChild( webchat );
botTitleBar.style.backgroundColor = "#FFE600";
chaticon.style.display = "none";
};
});
}()).catch(err => console.error(err));
I know that the directline secret should not be in the code directly but as my page is just a demo page I made it easy. As I searched forever to find a solution I think this may help you in case you face the same problem.