cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sllll
New Member

Form submission fails when posted on a website

After uploading the chatbot service to the website, the form submission function that was originally working does not work.

Is there any reason why the function below doesn't work? It just keeps refreshing.

 

 

// Add your BOT ID below
var BOT_ID = "";
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();
    }

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
chass
Memorable Member
Memorable Member

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-con...

 

 

 

<!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>

View solution in original post

3 REPLIES 3
renatoromao
Super User
Super User

Hi @sllll ,

 

Did you change the Bot ID?

 

And try to use this script in your page:

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

 

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Renato Romão
https://www.linkedin.com/in/renatoromao/


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

I used the script, and I also entered the bot ID.

The form submission method cannot be used on the page where the bot is applied.

chass
Memorable Member
Memorable Member

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-con...

 

 

 

<!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>

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Planning-build-bot-2-5-20-768x460.png

New Year’s Resolution - Build Conversational Bots!

Access all of the Power Virtual Agents learning resources and join the January learning challenge.

Users online (1,272)