AI助手悬浮框嵌入指南:5分钟打造智能交互入口

简介: 阿里云AppFlow AI助手悬浮框助力企业提升数字化服务能力,通过可视化配置实现全场景覆盖、智能交互升级与低成本部署,支持网页、企业微信、钉钉多端统一交互,提升用户体验。

在数字化服务场景中,即时交互能力成为企业竞争力的核心要素。阿里云AppFlow AI助手悬浮框通过无需开发经验的可视化配置,为企业提供三大核心价值:

  • 全场景覆盖:支持网页、企业微信、钉钉多端统一交互
  • 智能升级体验:流式对话+图文混排渲染,突破传统IM交互限制
  • 低成本部署:测试域名30秒极速上线,正式环境域名绑定仅需3步

操作步骤

创建百炼应用(可选)

  1. 进入百炼控制台的应用列表在页面右侧点击新增应用。在对话框中选择智能体应用,点击立即创建

  1. 根据需要选择模型。模型参数无特殊需要保持默认即可。
  2. 提示词部分可以根据您的要求填写对AI助手的要求和约束

为应用增加私有知识

  1. 打开知识库选项,选择之前创建的知识库。Prompt 中会被自动添加一段信息,以便大模型在后续回答时参考检索出来的信息。

  1. 测试验证符合预期后点击发布。

创建AI助手

新建AI助手

  1. 登录AppFlow控制台
  2. 在左侧导航栏中选择模型服务 > AI助手。
  3. 在 AI 助手页面,单击创建AI助手设置基本信息。可以自定义上传您的AI助手图标和名称。
  4. 配置完成单击提交,跳转至AI助手详情页面。

导入并配置模型

  1. 点击 导入模型 按钮,选择阿里云百炼或者其他任意您想要使用的模型。

  1. 按照提示配置您的模型鉴权凭证,完成后点击保存。
  2. 填写百炼应用ID,可从百炼应用管理页面获取。
  3. 在配置项设置中,配置对话背景、欢迎语以及预设问题。
  • 对话背景,无需额外配置,将使用您在百炼应用中填写的内容。
  • 欢迎语,AI助手展示的欢迎语,例如欢迎使用XX产品AI助手,可根据您的需要填写
  • 预置问题,用户可以直接点击快速提问的问题,例如介绍xx产品的使用说明

  1. 在通用设置区块中根据您的业务需求配置如下内容:
  • 支持使用上下文记录,使您的AI助手在对话过程中携带有上下文连贯会话
  • 展示文档来源开关,开启之后,如果您添加了知识库则会返回知识库的文档引用序号
  • SLS日志记录,通过将对话记录集中存储在 SLS 中,您可以轻松检索和分析历史对话,洞察用户行为和偏好,从而优化对话模型和策略。
  • 语音输入,通过智能语音交互,您可以与AI助手进行语音对话,并获取语音结果。
  • 文件输入,通过文件交互,使您的AI助手可以根据文件内容进行回答。

创建集成

Web集成

通过创建一个Web页面集成,您可以通过指定链接地址访问您的AI助手页面。

  1. 在集成页签下,点击web页面集成。

  1. 在web页面集成页面点击创建完成,在弹框中输入集成名称,并单击确定。

  1. 跳转至Web配置页面后,根据提示设置基础信息。

左侧配置修改后,右边预览页面会同步更新,您可以根据需要调试和配置您想要的实际效果

  1. 配置部署信息。
  • 独立页面部署:将网页单独部署,拥有独立URL,可单独访问和运行。
  • Iframe页面嵌入:使用Iframe在现有页面嵌入其他HTML文档,显示外部内容于特定区域。
  • 悬浮挂件部署:固定于网页边缘的小工具,如客服窗口、返回顶部按钮,随用户操作显示或隐藏。
  • 复制悬浮框的JS脚本到您的Web页面代码中,即可在您的web应用中使用悬浮框AI助手

  1. 按照互联网合规要求,上述提供的阿里云访问地址是测试使用的,有效期为自Web集成创建之日起30天内。为了正常生产使用,请绑定您的自定义域名。绑定后即可使用您的域名或IP访问。
  • 在部署信息中单击绑定自定义域名
  • 首次勾选绑定时,会弹出AppFlow服务关联角色授权创建页面,请您确认并授权。
  • AppFlow共提供了两种方式为您配置域名或IP:使用可信主题域名或使用计算巢Nginx代理。
相关文章
|
6月前
|
存储 人工智能 移动开发
AppFlow —— 给您的网站或企微添加AI助手
AppFlow AI助手提供灵活配置,助您轻松实现AI工具的Web页面访问与多种集成方式(H5页面、悬浮框等)。支持自定义页面生成及样式调整,满足个性化需求。文中详细介绍了创建AI助手、模型配置、Web页面集成等步骤,并展示不同场景下的使用效果。此外,还提供了企业微信集成、模型管理和插件扩展等相关操作指引,助力高效利用AI助手提升工作体验。
835 15
AppFlow —— 给您的网站或企微添加AI助手
|
4月前
|
人工智能 JavaScript API
零基础构建MCP服务器:TypeScript/Python双语言实战指南
作为一名深耕技术领域多年的博主摘星,我深刻感受到了MCP(Model Context Protocol)协议在AI生态系统中的革命性意义。MCP作为Anthropic推出的开放标准,正在重新定义AI应用与外部系统的交互方式,它不仅解决了传统API集成的复杂性问题,更为开发者提供了一个统一、安全、高效的连接框架。在过去几个月的实践中,我发现许多开发者对MCP的概念理解透彻,但在实际动手构建MCP服务器时却遇到了各种技术壁垒。从环境配置的细节问题到SDK API的深度理解,从第一个Hello World程序的调试到生产环境的部署优化,每一个环节都可能成为初学者的绊脚石。因此,我决定撰写这篇全面的实
755 67
零基础构建MCP服务器:TypeScript/Python双语言实战指南
|
2月前
|
存储 安全 前端开发
CC&LG实践|基于 LangGraph 一步步实现 Claude-Code 核心设计
本文旨在深入剖析 Claude-Code 的核心设计思想与关键技术实现,逆向分析其功能模块,结合 LangGraph 框架的能力,系统性地演示如何从一个最基础的 ReAct Agent 出发,逐步构建一个功能完备的简版 Claude-Code。
1071 19
CC&LG实践|基于 LangGraph 一步步实现 Claude-Code 核心设计
|
3月前
|
域名解析 人工智能 机器人
AppFlow:企业微信支持流式群聊机器人
企业微信近日更新,新增群聊机器人功能,支持与自定义大模型对话。通过@机器人,可实现流式输出,提升交互效率。只需简单配置,即可将AI能力集成至群聊,完成即时消息解析与业务联动。
691 1
AppFlow:企业微信支持流式群聊机器人
|
5月前
|
存储 人工智能 自然语言处理
几分钟创建一个带有业务数据的AI智能客服
本文介绍如何利用阿里云百炼和AppFlow快速创建企业微信客服或网页客服。首先,通过上传企业知识文件和创建大模型问答应用,获取AI推理API服务;接着,在AppFlow控制台新建AI助手并导入配置好的模型,设置对话背景、欢迎语及预设问题等;最后,选择Web集成或企业微信集成方式部署客服系统。整个过程简单易操作,无需技术背景,适合非技术人员使用。文章还提到支持自定义域名绑定以及更多渠道发布选项,助力企业高效搭建专属智能客服。
631 12
几分钟创建一个带有业务数据的AI智能客服
|
4月前
|
人工智能 Nacos 开发者
手把手教你搭建MCP服务器
Model Context Protocol(MCP)正成为AI智能体连接外部工具的主流标准。本文详解两种搭建方案,助你构建专属AI工具扩展引擎,实现工具调用的标准化与高效集成。
|
8月前
百炼-我的智能体应用在微信公众号渠道无法得到输出
微信公众号,总是出现思考中,请回复“继续”,而在我的应用观测中已经体现了输出
278 0
|
10月前
|
人工智能 机器人 API
AppFlow:无代码部署Dify作为钉钉智能机器人
本文介绍如何通过计算巢AppFlow完成Dify的无代码部署,并将其配置到钉钉中作为智能机器人使用。首先,在钉钉开放平台创建应用,获取Client ID和Client Secret。接着,创建消息卡片模板并授予应用发送权限。然后,使用AppFlow模板创建连接流,配置Dify鉴权凭证及钉钉连接凭证,完成连接流的发布。最后,在钉钉应用中配置机器人,发布应用版本,实现与Dify应用的对话功能。
1936 7
AppFlow:无代码部署Dify作为钉钉智能机器人