2.2订单卡片

1.1 接口说明

在电商、零售等行业客户服务场景中，订单类咨询占比高。原有纯文本信息传递模式存在访客输入成本高、订单信息描述易偏差、需多轮往复沟通确认等问题，导致咨询路径长、服务效率低、用户体验不佳。

本次通过快捷入口 + iframe 对接方案，实现结构化订单卡片消息的传递与展示，大幅提升订单类咨询的沟通效率。

1.2 配置说明

1.后台配置：【网站渠道】设置「交互配置」标签「快捷入口」栏，进行自定义配置，核心配置项如下：
-外链地址：填写第三方订单商品页面的 URL，系统通过 iframe 方式嵌入对接该页面
-排序规则：支持输入 0~9999 范围内的正整数；数值越大，快捷入口在访客端展示顺序越靠后；排序值相同时，按创建时间倒序排列
-身份传参配置：提供多选参数配置项，可勾选需要透传给第三方页面的访客身份参数，实现访客身份同步，精准匹配对应订单数据

1.3 访客端交互流程

1访客在网站发起咨询，进入聊天窗口后，点击底部「快捷入口」按钮，云客服将访客身份信息透传给第三方订单系统，第三方系统通过 iframe 展示该访客对应的订单/商品页面
2访客在 iframe 页面内选中目标订单，点击「发送订单」，第三方平台会通过接口将信息推送至云客服，以卡片消息形式发送到会话中

「发送订单」对接：

订单卡片（快捷入口配置）
点击发送订单按钮时，需要通过postMessage传递数据，cardInfo的值必须使用encodeURIComponent编码后传递，示例如下：
const encodedOrderUrl = encodeURIComponent(JSON.stringify({
url: 'https://ykf.uincall.com/orders.html',// 订单页面
width: 300,// 订单页面展示的宽度
height: 400,// 订单页面展示的高度
}));

const cardInfo = {
cardInfo: encodedOrderUrl,
type: 'ykfUinCallOrderCard',// 用于标识订单卡片类型
style: 'iframe',// 用于指定卡片样式
}
// 通过postmessage发送订单信息
window.parent.postMessage(cardInfo, '*');

1.4座席端展示效果

座席在在线咨询会话窗口中，可直接查看结构化的订单卡片，无需多轮沟通即可快速确认订单详情，提升咨询处理效率。