Integrating api.ai chatbot on a website

问题:

I want to have a chatbot on my website, in a conversational style similar to Facebook messenger. I want it on the same page, as a chat window, and not on a separate page. How can I achieve that? Thank you in advance.

回答1:

Try out Kommunicate live chat widget for DialogFlow (api.ai) integration. https://docs.kommunicate.io/docs/web-installation.html

Here is the step by step guide for adding api.ai (dialogflow) on website: https://www.kommunicate.io/blog/how-to-integrate-bot-using-dialogflow-in-kommunicate-1ac32911a7d0/

回答2:

Api.ai provides an integration named Web Demo.

You can find that in integrations.

Turn it ON and copy the produced iframe to your website.

This is how it looks:

回答3:

yes, you can create web based chatbot through api.ai and you can use iframe of it on your website.

回答4:

Yes, there is a way in dialogflow to do so. You will just have to create a simple chat window in html/angular or in any framework you want to design. You can just capture user-entered query & make an ajax call & pass it to dialogflow. Again that depends on the api version that you're using. Dialogflow offers you v1/v2 apis, which itself changes the request format. Please have a look at code below (used v1 api):

function captureUserQuery() {
         var text = jQuery(".my-text").val();
         dialogflowApi(text);  
}

function dialogflowApi(text) {
         jQuery.ajax({
            type: "POST",
            url: "https://api.dialogflow.com/v1/query?v=20170712",
            contentType: "application/json; charset=utf-8",
            headers: {
                "Authorization": "Bearer " + access_token
            },
            data: JSON.stringify({
                query: text,
                lang: "en",
                sessionId: "chatbot"
            }),
            success: function(response) {
                console.log("success");
                // Here you will get the response to your query in json, you will have to parse it based on the type it has like text, image, card etc. & show it to user. 
                parseResponse(response); // function to parse your response. 
            },
            error: function() {
                console.log("Error");
            }
        });
}

Hope this answers your query. Let me know if you have any more.

回答5:

Few updates for whoever reading it in 2018:

1) Api.ai is now called DialogFlow

2) There is a https://github.com/dialogflow/dialogflow-javascript-client repo with demo inside. Just do npm i and npm start on master branch (v2 haven't worked for me)