【问题标题】:Stepwise opening of web chat window using DirectLine使用 DirectLine 逐步打开网络聊天窗口
【发布时间】:2020-03-30 19:34:58
【问题描述】:

客户要求我为在其网站上与聊天机器人交互的用户提供更好的 UI/UX 体验。

客户想要以下:

  1. 网站右下角有一个机器人图标(完成)
  2. 当用户单击机器人图标时,他们会看到下图中的窗口。它基本上是一个较小的网络聊天窗口。

  1. 用户在聊天框中输入后,完整的聊天窗口如下所示:

我只关心从 1 到 2 和 3 的过渡。我已经设计了机器人 UI,我可以直接从第 1 部分过渡到第 3 部分。我不知道该怎么做 2. 如何让一个较小的窗口滚动到一个完整大小的聊天窗口。

我正在研究网络聊天框架,并且已经完成了颜色、字体和 UI 的更改,如您在第二张图片中看到的那样。我需要帮助两件事:

  1. 像我上面解释的那样进行转换是否是个好主意。
  2. 如何操作的说明。我还没有找到任何可以帮助我做到这一点的东西。为我指明正确的方向会很有帮助!

【问题讨论】:

  • 我正在使用嵌入在 .NET 网站中的 DirectLine 网络聊天。进一步阅读后,看起来 React 包为我提供了更多自定义 UI/UX 的选项。但是我的网站不在 React 中,所以这不起作用。
  • 你想使用 React 包中的哪些自定义选项?只是为了清楚起见,Web 聊天的 React 风格 (window.ReactDOM.render()) 不需要在 React 中构建您要嵌入 Web 聊天的网站。它所需要的只是简单的 HTML。为此,我不熟悉任何可以在 React 风格中完成而在非 React 风格中无法完成的网络聊天功能 (window.WebChat.renderWebChat())。
  • 你最后的评论也是我的想法。虽然我试图说服客户从用户体验的角度来看这不是一个好主意。我宁愿让他们打开网络聊天以使用自适应欢迎卡和上面的交互式按钮,而不是直接跳到与机器人聊天。
  • 接受/投票支持更大的 Stack Overflow 社区和任何有类似问题的人。如果您觉得我的回答足够,请“接受”并点赞。如果没有,请告诉我我还能提供哪些帮助!

标签: javascript botframework bots chatbot


【解决方案1】:

考虑在您的页面上实现一个模态或类似功能,以模仿最小化的网络聊天按钮。选择后,模式打开显示#2。因为它是在您的网站之外构建的模式,所以您可以控制样式,允许您根据需要对其进行格式化,包括添加“在此处键入消息”输入字段。当用户输入消息并提交(按回车键)时,这将打开/开始网络聊天会话,用户的初始消息在连接后被转发到网络聊天。

希望有帮助!

【讨论】:

    猜你喜欢
    • 2020-05-15
    • 2012-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多