部署自定义网络聊天机器人框架

时间:2018-07-27 18:17:42

标签: botframework bots web-chat

我克隆了此仓库https://github.com/Microsoft/BotFramework-WebChat,并设法在本地编辑CSS。 我想知道我需要部署什么才能在线使用网络聊天?

感谢您的帮助

4 个答案:

答案 0 :(得分:3)

  

我克隆了此仓库https://github.com/Microsoft/BotFramework-WebChat,并设法在本地编辑CSS。我想知道我需要部署什么才能在线使用网络聊天?

customize&build your own web chat之后,要在您的网站中嵌入网络聊天,您应该在项目中包含构建的botchat.cssbotchat.js文件,并引用botchat.css和{{1 }}。

  

我想添加一个this之类的小部件来打开我的聊天机器人,我需要做什么?

您似乎希望在网页中显示聊天图标,以允许用户动态打开/折叠您的网络聊天,为达到此要求,您无需修改​​botchat.js文件,如下所示代码样例对我有用,您可以参考它。

botchat.js

测试结果:

enter image description here

答案 1 :(得分:0)

如果我想添加这样的小部件 enter image description here 打开我的聊天机器人,我需要做什么?修改botchat.js文件是否足够?

如何在post中拥有像这样的应用程序?

答案 2 :(得分:0)

如果要使用iframe,则无法自定义设计。对于自定义设计,您需要使用Direct line,因为您可以更改设计以及使bot充分响应。

这是我正在使用的代码,对我来说很好:

    <!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>
  <!-- For Bot Frame -->
  <link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
  <link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body class="personal-body">

  <!-- For Bot Code -->
  <div id="BotChatElement">
  </div>
  <img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />

  <script src="../assets/JS/botchat.js"></script>
  <script>

    var model = {
      "userId": "demo1234",
      "userName": "You",
      "botId": "Chatbot Main Tree",
      "botIconUrl": "",
      "botName": "Chatbot Main Tree",
      "secret": "",
      "iconUrl": "",
      "directLineUrl": "https://webchat.botframework.com/v3/directline",
      "webSocketEnabled": "false"
    };[enter image description here][1]

    BotChat.App({
      directLine: {
        secret: model.secret,
        token: model.token,
        domain: model.directLineUrl,
        webSocket: false,
        sendTyping: true
      },
      user: { id: model.userId, name: model.userName },
      bot: { id: model.botId, name: model.botName },
      sendTyping: true,
      resize: 'window'
    },
      document.getElementById("BotChatElement"));

    function openchatbot() {
      $(".wc-chatview-panel *").removeClass("maximizebot");
      $(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });

    }

    $(".minimize-icon").on('click',
      function () {
        $(".wc-chatview-panel").removeClass("minimize-icon");
        $(".wc-chatview-panel ").toggleClass("minimizebot");
        $(".minimize-icon ").toggleClass("maximizebot");

      });
    $(".close-icon").on('click',
      function () {
        $(".wc-chatview-panel ").removeClass("minimizebot");
        $(".wc-chatview-panel ").removeClass("maximizebot");
        $(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
      });
  </script>
</body>

</html>

答案 3 :(得分:0)

要部署您的机器人,请执行以下步骤:

  1. 创建一个Azure帐户。

    您可以从here创建免费的Azure试用版。

  2. 将MS Bot框架代码部署到Azure:

    • 您可以看到此video将MS Bot框架代码部署到Azure 使用Visual Studio的WebChat频道。
    • 您也可以选中此tutorial。 (但是,本教程使用旧版本的Azure门户)。
  3. 将漫游器与WebChat通道连接后,可以在HTML代码中使用Embed code