Pasting your code into my HTML page it works great for me...Suggesting the issue may be in your HTML page.
Rather than trouble shooting your HTML i thought i would include the page i was using that works below.
More information about this topic can be found here:
https://powervirtualagents.microsoft.com/en-us/blog/make-your-power-virtual-agents-bot-start-the-conversation-using-a-custom-canvas/
<!DOCTYPE html>
<html>
<head>
<title>Contoso Sample Web Chat</title>
<!-- 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: black;
}
#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>Contoso Bot Name</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
};
// Add your BOT ID below
var BOT_ID = "a6a0c899-c4af-4a23-922e-60850b5d4cf1";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const store = window.WebChat.createStore(
{},
function (store) {
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
store.dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: { postBack: true, },
text: "hello",
type: "message",
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
}
}
);
fetch(theURL)
.then(function (response) {
return response.json()
})
.then(function (conversationInfo) {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions: styleOptions
},
document.getElementById('webchat'));
})
.catch(function (err) { console.log('An error occurred: ', err) });
function Check() {
form.submit();
}
</script>
</body>
</html>
