NXLINK IFrame 嵌入接口文档和说明
本文档适用于 CRM 或其他业务系统嵌入 NXLINK IFrame，并通过 postMessage 向 IFrame 发送客户 WhatsApp 会话参数。
1. 测试Demo地址
https://testclient.solutioncl.com/nxlink-iframe-test
使用NXLINK账号登录平台
左侧输入对应的客户WhatsApp号码，与商户的WhatsApp号码，点击发起聊天，即可直接跳转到右侧聊天框页面
2. 接入地址
当前示例使用的 NXLINK iframe 地址：
https://app.nxlink.ai/admin/#/
对应 origin：
https://app.nxlink.ai
示例代码位置：
const iframeUrl = 'https://app.nxlink.ai/admin/#/'
const iframeOrigin = new URL(iframeUrl).origin
3. iframe 嵌入方式
推荐 iframe 配置：
<iframe
id="nxlink-iframe"
name="nxlink-iframe"
src="https://app.nxlink.ai/admin/#/"
allow="camera *; microphone *; autoplay *; clipboard-read *; clipboard-write *"
referrerpolicy="strict-origin-when-cross-origin"
title="NXLINK call center"
></iframe>
说明：
|
属性 |
说明 |
|
`src` |
NXLINK 页面地址 |
|
`name` |
便于通过 `window.frames['nxlink-iframe']` 获取 iframe window |
|
`allow` |
允许麦克风、摄像头、自动播放、剪贴板能力 |
|
`referrerpolicy` |
控制 Referer 发送策略，不直接决定 cookie 是否可用 |
实际示例中，src 是由 script.js 动态赋值：
elements.iframe.src = iframeUrl
4. 发送消息
CRM 页面通过 window.postMessage 向 NXLINK iframe 发送消息。
4.1 消息类型
chatToCustomer
4.2 请求结构
{
type: 'chatToCustomer',
data: {
whatsapp: '<客户 WhatsApp 手机号>',
businessNumber: '<WA 商务号码>'
}
}
字段说明：
|
字段 |
类型 |
必填 |
说明 |
|
`type` |
string |
是 |
固定为 `chatToCustomer` |
|
`data.whatsapp` |
string |
是 |
客户 WhatsApp 手机号 |
|
`data.businessNumber` |
string |
是 |
WA 商务号码 |
4.3 发送示例
const iframeUrl = 'https://app.nxlink.ai/admin/#/'
const iframeOrigin = new URL(iframeUrl).origin
const iframe = document.querySelector('#nxlink-iframe')
const message = {
type: 'chatToCustomer',
data: {
whatsapp: '85261234567',
businessNumber: '85270000000',
},
}
iframe.contentWindow.postMessage(message, iframeOrigin)
当前 v2-static 示例是点击 Send message 后发送一次：
iframeWindow.postMessage(message, iframeOrigin)
不要在生产代码里使用 '*' 作为 targetOrigin。推荐使用明确的：
5. 完整最小示例
<!doctype html>
<html>
<body>
<input id="whatsapp" value="85261234567" />
<input id="businessNumber" value="85270000000" />
<button id="send">Send message</button>
<iframe
id="nxlink-iframe"
name="nxlink-iframe"
src="https://app.nxlink.ai/admin/#/"
allow="camera *; microphone *; autoplay *; clipboard-read *; clipboard-write *"
></iframe>
<script>
const iframeOrigin = 'https://app.nxlink.ai'
const iframe = document.querySelector('#nxlink-iframe')
document.querySelector('#send').addEventListener('click', () => {
iframe.contentWindow.postMessage(
{
type: 'chatToCustomer',
data: {
whatsapp: document.querySelector('#whatsapp').value.trim(),
businessNumber: document.querySelector('#businessNumber').value.trim(),
},
},
iframeOrigin,
)
})
</script>
</body>
</html>