Botframework 创建MicrosoftBot框架的UI_Botframework

Botframework 创建MicrosoftBot框架的UI

botframework

Botframework 创建MicrosoftBot框架的UI,botframework,Botframework,是否可以在Microsoft chatbot emulator的顶部创建我自己的UI？如果是的话，我想把我的聊天机器人的UI设计成完全不同于蓝白无聊的micorosft的UI。帮助我实现这一目标。编辑：查看Nox的伟大答案 Edit2：我开始在mvc应用程序中为webchat机器人蒙皮，如下所示：上有一个修改过的webchat Bot示例您还可以使用DirectLine api，创建任何您喜欢的前端：有很多方法可以做到这一点，您的方法将取决于您的能力和需要。如果这将出现在移动应用程序中

是否可以在Microsoft chatbot emulator的顶部创建我自己的UI？

如果是的话，我想把我的聊天机器人的UI设计成完全不同于蓝白无聊的micorosft的UI。帮助我实现这一目标。

编辑：查看Nox的伟大答案

Edit2：我开始在mvc应用程序中为webchat机器人蒙皮，如下所示：

上有一个修改过的webchat Bot示例

您还可以使用DirectLine api，创建任何您喜欢的前端：

有很多方法可以做到这一点，您的方法将取决于您的能力和需要。如果这将出现在移动应用程序中，最干净的方法可能是使用rest api使用xamarin来实现这一点，以方便跨平台

如果您精通使用react进行web开发，并且想要一个干净的web视图（最好的web界面选项），您可以获得microsoft发布的代码库，如果您需要它作为一个快速而肮脏的web视图进行测试，您可以在需要的地方插入css/js

如果你的web开发技能不高，但你想要一个干净稳定的界面（或者你不需要太多的定制），你可以运行一个direct line网站，只需修改为基本机器人托管的css/js文件。我建议下载这些托管文件，而不是引用它们，这样您就可以直接操作它。最后一个选项实际上就是我正在使用的。当我有足够的时间时，我计划用xamarin构建一个很好的跨平台视图

<!DOCTYPE html>
<html>
  <head>
    <!-- CSS -->
    <link href="https://unpkg.com/botframework-webchat/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <!-- JAVASCRIPT -->
    <script src="https://unpkg.com/botframework-webchat/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>


BotChat.App({
directLine:{secret:direct\u line\u secret}，
用户：{id:'userid'}，
bot:{id:'botid'}，
调整大小：“检测”
}，document.getElementById（“bot”）；

编辑：

我忘了提一下，你可以在bitbucket上免费托管这个web界面，并将其嵌入到你的移动应用程序中，你还可以在你的机器人内的azure中托管它。您可以通过创建一个新的index.html来实现这一点，在web.config文件中，它有default.htm，您可以将其替换为index.html，然后像那样托管，而不需要额外的web主机。

如果您想创建自定义版本的Bot Framework Emulator，请打开存储库。该应用程序本身采用的技术与和等应用程序背后的技术相同。

请查看：这很有趣@EricDahlvangI我已经用一个示例更新了我的答案（使用Nox提到的最后一个选项）很棒的答案！谢谢你。