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

【问题标题】：Deploy customize webchat bot framework部署自定义网络聊天机器人框架
【发布时间】：2018-07-27 18:17:41
【问题描述】：

我克隆了这个 repo https://github.com/Microsoft/BotFramework-WebChat 并设法在本地编辑 css。我想知道我需要部署什么才能在线使用网络聊天？

感谢您的帮助

【问题讨论】：

github.com/Microsoft/…

【解决方案1】：

我克隆了这个 repo https://github.com/Microsoft/BotFramework-WebChat 并设法在本地编辑 css。我想知道我需要部署什么才能在线使用网络聊天？

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

我想添加一个像this 这样的小部件来打开我的聊天机器人，我需要做什么？

您似乎希望在您的网页中显示聊天图标以允许用户动态打开/折叠您的网络聊天，要实现此要求，您无需修改botchat.js 文件，以下代码示例为我工作，你可以参考一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="BotChat/botchat.css" rel="stylesheet" />
    <script src="BotChat/botchat.js"></script>
    <style>
        #mychat {
            margin: 10px;
            position: fixed;
            bottom: 30px;
            right: 10px;
            z-index: 1000000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Hello World</h1>
        <!--other page contents-->
        <img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
    </div>
</body>
</html>
<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({
            directLine: { secret: '{directline_secret}' },
            user: { id: 'You' },
            bot: { id: '{your_botid}' }
        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');

                botDiv.style.height = "0px";

                document.getElementById("mychat").style.display = "block";
            };
        });

        document.getElementById("mychat").addEventListener("click", function (e) {

            document.getElementById("botDiv").style.height = '500px';

            e.target.style.display = "none";
        })
    }());
</script>

测试结果：

【讨论】：

【解决方案2】：

如果我想添加这样的小部件要打开我的聊天机器人，我需要做什么？修改botchat.js文件就够了吗？

如何拥有像post这样的应用程序？

【讨论】：

【解决方案3】：

如果您想使用 iframe，则无法自定义设计。对于自定义设计，您需要使用 Direct line，因为您可以更改设计并使机器人完全响应。

这是我正在使用的代码：

    <!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>

【讨论】：

它不起作用，bot显示在整个页面上
是的，您需要自定义 CSC 文件以进行自定义设计

【解决方案4】：

要部署您的机器人，请按以下步骤操作：

创建一个 Azure 帐户。

您可以从here 创建免费试用 Azure 订阅。
将 MS Bot 框架代码部署到 Azure：
- 您可以看到video 将 MS Bot 框架代码部署到 Azure 使用 Visual Studio 的网络聊天频道。
- 您也可以查看此tutorial。（但是，本教程使用的是旧版本的 Azure 门户）。
将机器人与微信频道连接后，您可以在 HTML 代码中使用Embed code。

【讨论】：