带入咨询内容

访客从商品页、订单页点「联系客服」时，把他正在看的那一件一起带过来，客服不用再追问「您说的是哪一件」。

做出来是什么样

访客点开聊天窗时，你带进来的内容已经在那儿了。

带一段文字：直接填进输入框，访客可以改、也可以直接发。

带一张卡片：商品、订单或文章卡片摆在消息流最下面，下方有一个发送按钮。

永远不会自动发出去

带进来的内容只是摆在那里，访客点了发送才会发出。这是有意的设计：链接谁都能拼，如果带进来就自动发，任何人都能用你的链接以访客的名义说话。

什么时候用得上

• 访客在商品页点「联系客服」，把他正在看的那件商品带过来，客服不用再问「您说的是哪一件」
• 访客从订单详情页、物流页进来，把那笔订单带过来，省掉一轮追问单号
• 访客在你的页面上挑过条件（预算、尺寸、型号），把这些条件整理成一句话带过来，他不用再复述一遍

参数

hc.setPresend({ text, card })   // 两个字段都可选，只传其一就只动那一样
hc.setPresend(null)             // 撤掉还没发出去的卡片

字段	类型	说明
text	string	填进输入框的文字，效果等同访客自己打进去，会覆盖原有草稿
card	卡片对象	摆在消息流末尾的待发卡片，只支持商品、订单、文章三类，字段见下方

带一段文字

hc.setPresend({ text: '我想问一下这款沙发，预算 5000~8000 元，客厅宽 3 米 2 放得下吗？' })

文字写进输入框之后就归访客了：他可以接着改、可以删掉重写，也可以直接发送。效果和他自己打进去完全一样。

有一点要知道：它会覆盖输入框里原有的草稿。带进来的内容是访客此刻正在看的东西，比几天前留在草稿里的半句话更接近他现在想说的。

带一张卡片

hc.setPresend({
  card: {
    cardType: 'product',
    productId: 'SKU-10023',
    title: '示例商品名称',
    description: '示例规格描述',
    price: { amount: 19900, currency: 'CNY' },
    originalPrice: { amount: 29900, currency: 'CNY' },
    imageUrl: 'https://你的域名/images/sku-10023.jpg'
  }
})

cardType 决定是哪一类卡片，其余字段按类型各有各的定义，完整字段表在下面。访客点发送之后，这张卡片就作为他的消息发出去，和他自己从选择器里选一个发出来没有区别。

文字和卡片可以一起带：

hc.setPresend({
  text: '这个还有货吗？',
  card: { cardType: 'product', productId: 'SKU-10023', title: '示例商品名称' }
})

几条规矩

• 两个字段各管各的。 只传 text 就只动输入框，只传 card 就只动卡片；先带文字、后带卡片不会把前面的冲掉。
• 卡片一次只有一张。 再调一次就换成新的那张。
• 撤掉卡片用 hc.setPresend(null)。访客自己点卡片右上角的 × 也能收起，收起之后这次访问不再出现。
• 聊天窗没打开时调用也有效。 内容先存着，访客点开时才摆出来；它不会替你打开聊天窗，要打开自己调 open()。
• 卡片类型不对（不是那三类、或者缺必填字段）时，卡片不显示、浏览器控制台里有一行提示，同一次调用里的文字照常生效。
• 访客发消息、客服回复都排在卡片上面，卡片一直贴在输入框上方，直到访客发出去或者自己关掉。

卡片字段

三类卡片的字段和选择器里的条目完全一样，这里是同一份定义。

字段定义

product（商品）、order（订单）、article（文章），每类最多 50 条，超出部分不会呈现。

三类的字段各不相同，字段名必须完全一致：写错名字的字段会被静默丢弃，不报错、不提示，只表现为卡片上少了图或少了描述。

product 商品卡

字段	类型	必填	含义
title	string	是	商品名，≤200 字符
description	string	否	规格、卖点等，≤2000 字符
imageUrl	string	否	商品图外链，必须是合法 URL
price	Money	否	现价
originalPrice	Money	否	划线原价
detailUrl	string	否	商品详情页，客服点击可跳转
productId	string	否	你自己的 SKU 编号，≤128 字符
layout	'compact' | 'large'	否	卡片形态，缺省由聊天窗决定

order 订单卡

字段	类型	必填	含义
orderId	string	是	订单号，≤128 字符
title	string	是	订单标题，≤200 字符
total	Money	是	订单总额
status	见下	是	订单状态
createdAt	number	是	下单时间，毫秒时间戳
items	array	是	商品行，≤30 条
items[].name	string	是	商品名
items[].quantity	number	是	数量，正整数
items[].price	Money	是	单价
items[].imageUrl	string	否	商品图外链
detailUrl	string	否	订单详情页

status 取值：pending（待付款）、paid（已付款）、shipped（已发货）、delivered（已送达）、refunded（已退款）、cancelled（已取消）。传其他值会被拒绝。

商品行超过 30 条，这张卡整个发不出去，不是只显示前 30 条。卡片是摘要不是清单，行数多的订单挑主要商品放进去，其余让客服点 detailUrl 看详情。

article 文章卡

字段	类型	必填	含义
title	string	是	文章标题，≤200 字符
description	string	是	摘要，≤2000 字符
url	string	是	文章链接
imageUrl	string	否	封面图外链
source	string	否	来源站点名，≤100 字符

Money 金额

{ amount: 39900, currency: 'CNY' }   // ¥399.00
{ amount: 99, currency: 'USD' }      // $0.99

amount 是最小货币单位的整数（人民币为分），不接受浮点数。currency 用 ISO 4217 代码。展示时由聊天窗按客户语言格式化，你不用自己拼货币符号。

图片一律用外链

卡片图只能传 imageUrl，值是你自己的图片地址。

不要传 imageAttachmentId。那是客服在工作台上传素材时才用的字段，服务端会校验附件归属，用它发出去的卡片客户这边发不成功，而且不会有明确的报错提示。

客户选完之后

点中某一项，卡片直接作为一条消息发给客服，你不需要再做任何事。客服在工作台里看到的是完整卡片，能点进 detailUrl。

在哪里调

在你自己的页面上，访客点「联系客服」的时候调一次：

<script>
  window.hecong = window.hecong || function (c) { (window.hecong.q = window.hecong.q || []).push(c) }

  document.querySelector('#contact-support').addEventListener('click', function () {
    window.hecong(function (hc) {
      hc.setPresend?.({
        text: '这个还有货吗？',
        card: { cardType: 'product', id: 'SKU-10023', title: '示例商品名称' }
      })
      hc.open()
    })
  })
</script>

带进来的内容只活在当前这个页面里，跳到另一个页面就没了。单页应用换路由时不会自动清，到了新页面重新调一次，或者调 hc.setPresend(null) 清掉。

写成 hc.setPresend?.(…) 而不是 hc.setPresend(…)：访客浏览器里可能还缓存着旧版脚本，那上面没有这个命令，加个问号可以让旧脚本上的调用安静地跳过，不至于报错中断你后面的代码。

下一步

• 商品、订单与文章选择器 —— 三类卡片的完整字段表，以及让访客自己在聊天窗里挑
• 接口速查 —— 全部命令与字段类型