How do I integrate AWS Lex chatbot to my website?

2019-02-19 01:22发布

站内问答 / PHP
1836 3 4

My website is doing customer service & support ticket system.

But the way of integrating AWS lex seems not as easy as FB is.

The thing I wanna do is letting Lex Bot reply tickets for the customer on my website.


Do I need to learn AWS Lambda and API Gateway first for integrating Lex?

I want to know how to call the lex bot API in PHP curl.

As API Docs said.

But I am not sure why the POST url is like a relative path.

Anyway, thanks for the help.

3条回答
Anthone
2楼-- · 2019-02-19 02:01

Played around with AWS Lex a bit recently, and it seems that you cannot really avoid using Lambda code.

First the validation and fulfilment code hooks will be lambda functions and for any half-decent lex bot conversation you will need those.

Second is the chat client: if you do not want to use the existing list of native chatbot integrations (currently Facebok, Twilio SMS and Slack) you will need a custom implementation. A direct PHP curl might be an option (accessing the API directly), but I'd highly recommend using a standard AWS API Gateway / AWS lambda setup to create a lex client and use the convenience of SDKs instead. It's a very flexible setup, super easy. We have picked in up in days, with minimal python code base using boto3 SDK, with virtually no experience in python at all.

Hope it helps!

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2019-02-19 02:09

Custom implementation is the only way available to talk to lex from your website. However, it is not as complex as it sounds. The developer link here will help in implementation in js.

The only catch however is sharing aws credentials (IAM user) in your website code. This can also be avoided by getting temporary token from IAM, which would need further development effort.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-02-19 02:15

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.

Here are the steps to add lex bot to your website:

1. Create new identity pool

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. Give lex bot access permission to the identity pool

Go to IAM service. Select Roles. Look for Cognito_testPoolNameUnauth_Role. Click on Attach Policy. Search for AmazonLexRunBotsOnly and attach it.

3. Lex runtime call from website: Here is the sample code for the website

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)