API.AI - 基於網頁的示例

0

確定 - 如果你只是在尋找如何在API.ai聊天機器人部署到一個自定義的基於Web的應用程序（而不是Facebook的信使爲例）我建議你檢查出這個問題： how to connect my chatbot user interface to APIAI serverhost via python sdk or javascript?

我詳細說明了大部分細節，並鏈接到一個完整的工作示例。這應該讓你開始。

來源

2017-04-18 12:59:53

+0

第二種情況，在那裏聊天機器人被集成到一個web應用程序，人們可以從瀏覽器聊天。 – Tweak

0

如果您只是想將您已經使用API.AI構建的聊天機器人嵌入到網頁中，那非常簡單。您需要從API.AI工作區發佈bot，複製嵌入代碼並將其粘貼到HTML中。這不會是一個可以自定義的白色標籤聊天機器人，它只是在一個iFrame中。它在格式設置方面也存在一些限制（例如，您不能使用可點擊的超鏈接）和其他豐富的文本。

如果你想了解更多的細節，你可以在我的博客上看看這篇文章。

http://miningbusinessdata.com/embedding-api-ai-chatbot-into-your-wordpress-site/

您還可以看到一些（簡單的）聊天機器人的一些例子我已經嵌入到自己的WordPress博客

http://miningbusinessdata.com/botfolio/

更新17年4月28日：

我已經想出瞭如何編寫一些自定義代碼來做到這一點。你可以檢查我的文章一下： https://miningbusinessdata.com/adding-faq-chatbot-to-your-wordpress-site-using-api-ai/

來源

2017-04-19 08:15:08

0

Insert your access Token and enjoy! 
    <html> 
    <head> 
     <title>BOT </title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      var accessToken = "yourAccessToken"; 
      var baseUrl = "https://api.api.ai/v1/"; 
      var synth ; 
      $(document).ready(function() { 
       $("#input").keypress(function(event) { 
        if (event.which == 13) { 
         event.preventDefault(); 
         send(); 
        } 
       }); 
       $("#rec").click(function(event) { 
        switchRecognition(); 
       }); 
      }); 
      var recognition; 
      function startRecognition() { 
       recognition = new webkitSpeechRecognition(); 
       recognition.onstart = function(event) { 
        updateRec(); 
       }; 
       recognition.onresult = function(event) { 
        var text = ""; 
        for (var i = event.resultIndex; i < event.results.length; ++i) { 
         text += event.results[i][0].transcript; 
        } 
        setInput(text); 
        stopRecognition(); 
       }; 
       recognition.onend = function() { 
        stopRecognition(); 
       }; 
       recognition.lang = "en-US"; 
       recognition.start(); 
      } 

      function stopRecognition() { 
       if (recognition) { 
        recognition.stop(); 
        recognition = null; 
       } 
       updateRec(); 
      } 
      function switchRecognition() { 
       if (recognition) { 
        stopRecognition(); 
       } else { 
        startRecognition(); 
       } 
      } 
      function setInput(text) { 
       $("#input").val(text); 
       send(); 
      } 
      function updateRec() { 
       $("#rec").text(recognition ? "Stop" : "Speak"); 
      } 
      function send() { 
       var text = $("#input").val(); 
       $.ajax({ 
        type: "POST", 
        url: baseUrl + "query?v=20150910", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        headers: { 
         "Authorization": "Bearer " + accessToken 
        }, 
        data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }), 
        success: function(data) { 
         setResponse(JSON.stringify(data, undefined, 2)); 
        }, 
        error: function() { 
         setResponse("Errore di comunicazione con il server."); 
        } 
       }); 
       setResponse("Caricamento..."); 
      } 
      function setResponse(val) { 
      //$("#response").text(val); 
      var obj = JSON.parse(val); 
      var response = obj.result.fulfillment.messages[0].speech;//testo a capo //obj.result.fulfillment.speech; 
      if (response != null) 
       $("#response").text(response); 
       else 
       $("#response").text(val); 


      } 
     </script> 
     <style type="text/css"> 
      body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; } 
      div { position: absolute; } 
      input { width: 400px; } 
      button { width: 50px; } 
      textarea { width: 100%; } 
     </style> 
    </head> 
    <body> 
     <div> 
      <input id="input" type="text"> <button id="rec">Speak</button> 
      <br>Response<br> <textarea id="response" cols="40" rows="20"></textarea> 
     </div> 
    </body> 
    </html>

來源

2017-06-22 14:31:02 Angelo

API.AI - 基於網頁的示例

回答

相關問題