如何使用直线 API 使聊天机器人显示为实时聊天？答案

【问题标题】：How can i make chat bot appear as live chat using direct line API?如何使用直线 API 使聊天机器人显示为实时聊天？
【发布时间】：2018-06-19 11:37:28
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

我有这段代码可以使用直接 Line API 而不是通常的 iframe 将机器人嵌入为实时聊天，但是当我输入我的直接密钥时，机器人会占据整个网页。我需要它出现在网页的右下角，并在用户点击它时作为生活聊天弹出。请有人指导我实现这一目标。谢谢

【问题讨论】：

标签： botframework direct-line-botframework

【解决方案1】：

您的问题与您显示 div 的方式有关，包括机器人：<div id="bot"/>

你可以设置这个 div 的样式，让它看起来像你想要的那样； bot Webchat Github 项目上提供了几个示例：

用于侧边栏显示：https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
对于全窗口：https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow

我强烈建议您查看第一个示例，其中包含窄、正常和宽 div 的演示

【讨论】：

侧边栏显示和全窗口的上方链接现在抛出 404，还有其他来源吗？
样本列表仍在repo中：github.com/Microsoft/BotFramework-WebChat/tree/master/samples
找到它：演示：microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/… 代码：github.com/microsoft/BotFramework-WebChat/tree/master/samples/…

【解决方案2】：

按照 Nicolas R 的建议，您可以设置容器 div <div id="bot"/> 的样式，将其放置在网页的右下角。我在一个项目中实现了同样的要求，下面的示例代码对我有用，你可以参考它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <style>
        .wc-chatview-panel {
            width: 350px;
            height: 450px;
            position: relative;
        }

        #bot {
            position: fixed;
            bottom: 0;
            right: 0;
        }

        .closechat {
            top: 405px !important;
        }
    </style>
</head>
<body>
    <div id="bot"></div>
</body>
</html>
<script>
    BotChat.App({
        directLine: { secret: "{your_directline_secret}" },
        user: { id: 'You' },
        bot: { id: '{Your_BotId}' },
        resize: 'detect'
    }, document.getElementById("bot"));

    $(function () {
        $("div.wc-header").prop("isopen", "true");

        $("div.wc-header").click(function () {
            var isopen = $(this).prop("isopen");
            //alert(isopen);
            if (isopen == "true") {
                $("div.wc-chatview-panel").addClass("closechat");
                $("div.wc-header").prop("isopen", "false");
            } else {
                $("div.wc-chatview-panel.closechat").removeClass("closechat");
                $("div.wc-header").prop("isopen", "true");
            }
        })
    })
</script>

测试结果：

【讨论】：

谢谢，这正是我需要的
您好@OluwatosinSamuelBabalola，如果它确实有助于实现您的要求，您可以将其标记为已接受的答案，这将有助于其他社区成员快速找到解决类似问题的答案。
你好@Fei Han，我正在寻找一种将头像或圆形图像图标添加到机器人响应和机器人用户消息的方法，就像这个链接[i.stack.imgur.com/GR7ne.png].probably from the css .无论如何你可以帮助或让我通过吗？