如何将AWS Lex chatbot集成到我的网站? [英] How do I integrate AWS Lex chatbot to my website?
问题描述
我的网站正在进行客户服务&支持票务系统.
My website is doing customer service & support ticket system.
但是，集成AWS lex的方法似乎不像FB那样简单.
But the way of integrating AWS lex seems not as easy as FB is.
我想做的就是让Lex Bot在我的网站上为该客户答复票证.
The thing I wanna do is letting Lex Bot reply tickets for the customer on my website.
我需要首先学习AWS Lambda和API网关以集成Lex吗?
Do I need to learn AWS Lambda and API Gateway first for integrating Lex?
我想知道如何在PHP curl中调用lex bot API.
I want to know how to call the lex bot API in PHP curl.
如 API文档所述.
但是我不确定为什么POST网址像相对路径一样.
But I am not sure why the POST url is like a relative path.
无论如何，谢谢您的帮助.
Anyway, thanks for the help.
推荐答案
要将lex bot集成到网站，您需要了解AWS Lex运行时API，AWS IAM和Cognito配置.这是将bot集成到网站的最安全方法.
To integrate lex bot to website, you need to know about AWS Lex runtime API, AWS IAM and Cognito configuration. This is the most secure way to integrate bot to website.
以下是将lex bot添加到您的网站的步骤:
Here are the steps to add lex bot to your website:
1.创建新的身份池
在Amazon Cognito控制台中，选择管理新身份池，然后选择创建新身份池.您提供一个池名称(testPoolName)，选择启用对未经身份验证的身份的访问"，然后选择创建池".记下身份池ID.
From the Amazon Cognito console, you choose Manage new identity pool, and then choose Create new identity pool. You provide a pool name (testPoolName), choose Enable access to unauthenticated identities, and then choose Create Pool. Note down the identity pool id.
2.授予lex bot访问权限， 身份池
2. Give lex bot access permission to the identity pool
转到IAM服务.选择角色.查找Cognito_testPoolNameUnauth_Role.单击附加策略.搜索AmazonLexRunBotsOnly并将其附加.
Go to IAM service. Select Roles. Look for Cognito_testPoolNameUnauth_Role. Click on Attach Policy. Search for AmazonLexRunBotsOnly and attach it.
3.来自网站的Lex运行时调用:这是网站的示例代码
在以下代码中填写身份池ID.要了解此代码，您需要了解AWS Lex运行时API.
Fill in the identity pool id in the following code. To understand this code, you need to understand AWS Lex run time api.
<!DOCTYPE html>
<html>
<head>
<title>Amazon Lex for JavaScript - Sample Application (BookTrip)</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.41.0.min.js"></script>
<style language="text/css">
input#wisdom {
padding: 4px;
font-size: 1em;
width: 400px
}
input::placeholder {
color: #ccc;
font-style: italic;
}
p.userRequest {
margin: 4px;
padding: 4px 10px 4px 10px;
border-radius: 4px;
min-width: 50%;
max-width: 85%;
float: left;
background-color: #7d7;
}
p.lexResponse {
margin: 4px;
padding: 4px 10px 4px 10px;
border-radius: 4px;
text-align: right;
min-width: 50%;
max-width: 85%;
float: right;
background-color: #bbf;
font-style: italic;
}
p.lexError {
margin: 4px;
padding: 4px 10px 4px 10px;
border-radius: 4px;
text-align: right;
min-width: 50%;
max-width: 85%;
float: right;
background-color: #f77;
}
</style>
<body>
<h1 style="text-align: left">Amazon Lex - BookTrip</h1>
<p style="width: 400px">
This little chatbot shows how easy it is to incorporate
<a href="https://aws.amazon.com/lex/" title="Amazon Lex (product)" target="_new">Amazon Lex</a> into your web pages. Try it out.
</p>
<div id="conversation" style="width: 400px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll"></div>
<form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
<input type="text" id="wisdom" size="80" value="" placeholder="I need a hotel room">
</form>
<script type="text/javascript">
// set the focus to the input box
document.getElementById("wisdom").focus();
// Initialize the Amazon Cognito credentials provider
AWS.config.region = 'us-east-1'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
// Provide your Pool Id here
IdentityPoolId: 'us-east-1:XXXXX',
});
var lexruntime = new AWS.LexRuntime();
var lexUserId = 'chatbot-demo' + Date.now();
var sessionAttributes = {};
function pushChat() {
// if there is text to be sent...
var wisdomText = document.getElementById('wisdom');
if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {
// disable input to show we're sending it
var wisdom = wisdomText.value.trim();
wisdomText.value = '...';
wisdomText.locked = true;
// send it to the Lex runtime
var params = {
botAlias: '$LATEST',
botName: 'BookTrip',
inputText: wisdom,
userId: lexUserId,
sessionAttributes: sessionAttributes
};
showRequest(wisdom);
lexruntime.postText(params, function(err, data) {
if (err) {
console.log(err, err.stack);
showError('Error: ' + err.message + ' (see console for details)')
}
if (data) {
// capture the sessionAttributes for the next cycle
sessionAttributes = data.sessionAttributes;
// show response and/or error/dialog status
showResponse(data);
}
// re-enable input
wisdomText.value = '';
wisdomText.locked = false;
});
}
// we always cancel form submission
return false;
}
function showRequest(daText) {
var conversationDiv = document.getElementById('conversation');
var requestPara = document.createElement("P");
requestPara.className = 'userRequest';
requestPara.appendChild(document.createTextNode(daText));
conversationDiv.appendChild(requestPara);
conversationDiv.scrollTop = conversationDiv.scrollHeight;
}
function showError(daText) {
var conversationDiv = document.getElementById('conversation');
var errorPara = document.createElement("P");
errorPara.className = 'lexError';
errorPara.appendChild(document.createTextNode(daText));
conversationDiv.appendChild(errorPara);
conversationDiv.scrollTop = conversationDiv.scrollHeight;
}
function showResponse(lexResponse) {
var conversationDiv = document.getElementById('conversation');
var responsePara = document.createElement("P");
responsePara.className = 'lexResponse';
if (lexResponse.message) {
responsePara.appendChild(document.createTextNode(lexResponse.message));
responsePara.appendChild(document.createElement('br'));
}
if (lexResponse.dialogState === 'ReadyForFulfillment') {
responsePara.appendChild(document.createTextNode(
'Ready for fulfillment'));
// TODO: show slot values
} else {
responsePara.appendChild(document.createTextNode(
'(' + lexResponse.dialogState + ')'));
}
conversationDiv.appendChild(responsePara);
conversationDiv.scrollTop = conversationDiv.scrollHeight;
}
</script>
这篇关于如何将AWS Lex chatbot集成到我的网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
