Botframework 如何使用direct line API使聊天机器人显示为实时聊天？ BotChat.App({ directLine:{secret:direct\u line\u secret}，用户：{id:'userid'}， bot:{id:'botid'}，调整大小：“检测” }，document.getElementById（“bot”）；_Botframework_Direct Line Botframework

Botframework 如何使用direct line API使聊天机器人显示为实时聊天？ BotChat.App({ directLine:{secret:direct\u line\u secret}，用户：{id:'userid'}， bot:{id:'botid'}，调整大小：“检测” }，document.getElementById（“bot”）；

botframework

Botframework 如何使用direct line API使聊天机器人显示为实时聊天？ BotChat.App({ directLine:{secret:direct\u line\u secret}，用户：{id:'userid'}， bot:{id:'botid'}，调整大小：“检测” }，document.getElementById（“bot”）；,botframework,direct-line-botframework,Botframework,Direct Line Botframework,我有这段代码来嵌入一个bot作为一个实时聊天，使用直连API而不是通常的iframe，但是当我输入我的directline secret密钥时，bot占据了整个网页。我需要它出现在网页的右下角，当用户点击它时，它会弹出一个生活聊天窗口。请有人指导我实现这一目标。谢谢您的问题在于如何显示您的div，包括bot: 您可以根据需要设置此div的样式；bot Webchat Github项目提供了几个示例：对于侧边栏显示：对于fullwindow：我强烈建议看一看第一个示例，它有一个窄div、

我有这段代码来嵌入一个bot作为一个实时聊天，使用直连API而不是通常的iframe，但是当我输入我的directline secret密钥时，bot占据了整个网页。我需要它出现在网页的右下角，当用户点击它时，它会弹出一个生活聊天窗口。请有人指导我实现这一目标。谢谢

您的问题在于如何显示您的div，包括bot:

您可以根据需要设置此div的样式；bot Webchat Github项目提供了几个示例：

对于侧边栏显示：
对于fullwindow：

我强烈建议看一看第一个示例，它有一个窄div、普通div和宽div的演示

正如Nicolas R所建议的，您可以设置容器div的样式，将其放置在网页的右下角。我在一个项目中实现了相同的需求，下面的示例代码对我很有用，您可以参考它

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


.wc聊天室视图面板{
宽度：350px；
高度：450px；
位置：相对位置；
}
#机器人{
位置：固定；
底部：0；
右：0；
}
.近距离聊天{
顶部：405px！重要；
}
BotChat.App({
directLine:{secret:{your_directLine_secret}}}，
用户：{id:'You'}，
机器人：{id:'{Your_BotId}}}，
调整大小：“检测”
}，document.getElementById（“bot”）；
$（函数（）{
$（“div.wc-header”）.prop（“isopen”、“true”）；
$（“div.wc-header”）。单击（函数（）{
var isopen=$（this.prop（“isopen”）；
//警报（等参）；
如果（等参=“真”）{
$（“div.wc-chatview-panel”）.addClass（“closechat”）；
$（“div.wc-header”）.prop（“isopen”、“false”）；
}否则{
$（“div.wc-chatview-panel.closechat”）.removeClass（“closechat”）；
$（“div.wc-header”）.prop（“isopen”、“true”）；
}
})
})

测试结果：

谢谢，这正是我需要的hi@oluwatosinasamuelbabalola，如果它确实有助于实现您的要求，您可以将其标记为已接受的答案，这将帮助其他社区成员快速找到答案，以解决类似问题。您好@Fei Han，我正在寻找一种方法，将化身或圆形图像图标添加到机器人响应和机器人用户消息中，就像这个链接一样[.可能来自css。你有什么可以帮我或帮我的吗？上面的边栏显示和fullwindow链接现在是404，有其他来源吗？示例列表仍然在repo:Found it:Demo:code:

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