编辑Microsoft ChatBot UI设计 [英] Edit Microsoft ChatBot UI design

问题描述

我已经通过Azue BotService设置了一个QnA Bot，并且我想使用WebChat频道，但是聊天界面的默认MS Design很平淡；我有办法编辑它吗?

I have setup a QnA Bot via the Azue BotService, and I want to use the WebChat channel, but the default MS Design for the chat interface is quite bland; is there a way for me to edit it?

是否可以从左侧的默认主题开始，例如下图所示，在右侧的类似Air New Zealand的机器人?

Is it possible to go form the default theme on the left, so something like Air New Zealand's bot on the right in the image below?

推荐答案

这取决于您如何在页面中集成网络聊天，但是可以更改外观，只有css和js

It depends on how you want to integrate the webchat in your page but yes it is possible to change the aspect, it's only css and js

在Webchat的GitHub帐户上提供了所有详细信息: https://github.com/Microsoft/BotFramework-WebChat

All the details are provided on the GitHub account for the Webchat: https://github.com/Microsoft/BotFramework-WebChat

简而言之:

是否要运行WebChat的自定义版本?克隆此存储库，对其进行更改，构建，然后引用您构建的botchat.css和botchat.js文件.

Want to run a custom build of WebChat? Clone this repo, alter it, build it, and reference your built botchat.css and botchat.js files.

样式:

样式

在/src/scss/文件夹中，您将找到用于生成的源文件 /botchat.css.运行npm后，运行build-css进行编译 变化.对于基本品牌，请更改colors.scss以匹配您的颜色 方案.要获得高级样式，请更改botchat.scss.

In the /src/scss/ folder you will find the source files for generating /botchat.css. Run npm run build-css to compile once you've made your changes. For basic branding, change colors.scss to match your color scheme. For advanced styling, change botchat.scss.

这篇关于编辑Microsoft ChatBot UI设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！