请输入
菜单

Digital Iframe 使用

Digital Iframe登录页面

登录链接：https://nxlink.nxcloud.com/admin/#/digital_iframe_test

 

Digital Iframe首页

正在进行中的对话列表

支持筛选聊天的筛选项：

  • 时间区间
  • 用户名称
  • WhatsApp
  • 客户分级
  • 对话状态
  • 标记状态
  • 处理状态
  • 对话类型

 

 

待分配页面

展示还没有被分配的聊天（也包含进入数字虚拟坐席的聊天）

支持根据坐席组筛选

 

客户列表页

展示所有的客户&我的客户，点击后支持编辑（基础信息，自定义信息，备注）

 

设置页面

支持的功能：

  • 切换状态（在线 or 离线）
  • 切换团队
  • 通用设置-时区修改
  • 语言：切换语言（中文 or 英文）
  • 新消息通知（是否接收新消息通知提醒，选择消息提示音）
  • 设备列表（展示已登录该账号的设备）
  • 关于NXLINK（查看当前NXLINK的版本）

 

 

iframe 与父页面通信事件对接规范

1. tokenInvalid（Token 失效事件）

  • 事件说明：当用户当前 Token 过期或无效时触发。
  • 传输字段：无
  • 示例数据：json
{ "type": "tokenInvalid" }

 

2. login（登录事件）

  • 事件说明：用户完成邮箱登录后触发，传递登录账号信息。
  • 传输字段：

字段名

类型

说明

示例值

email

string

登录用户邮箱

chenxxxxxx@xxxxxx.com

phone

string

手机登录时传递

13811111234
  • 示例数据：json
{ "type": "login", "content": { "email": "chenxxxxxx@xxxxxx.com" } }
{ "type": "login", "content": { "phone": "13811111234" } }

 

3. logout（退出登录事件）

  • 事件说明：用户主动退出登录或系统强制登出时触发，父页面需清理登录态。
  • 传输字段：无
  • 示例数据：json
{ "type": "logout" }

 

4. digitalAgentExists（坐席在线状态查询事件）

  • 事件说明：返回当前是否有在线坐席，用于父页面展示坐席服务状态。
  • 传输字段：

字段名

类型

说明

枚举值

code

number

坐席是否存在状态码

1 = 有坐席权限，2 = 无坐席权限
  • 示例数据：json
{ "type": "digitalAgentExists", "content": { "code": 1 } }

 

5. digitalAgentStatus（坐席服务状态事件）

  • 事件说明：传递坐席具体服务状态（如忙碌、空闲等），需结合业务定义 code 含义。
  • 传输字段：

字段名

类型

说明

示例值

code

number

坐席在线状态码

0 = 离线，1 = 在线
  • 示例数据：json
{ "type": "digitalAgentStatus", "content": { "code": 0 } }

 

6. unreadCount（未读消息数事件）

  • 事件说明：实时返回用户未读消息总数，用于父页面显示消息红点或数字提示。
  • 传输字段：

字段名

类型

说明

示例值

count

number

未读消息数量

0（无未读）、5（5 条未读）
  • 示例数据：json
{ "type": "unreadCount", "content": { "count": 0 } }

 

7. sendMessageEvent（发送消息事件）

  • 事件说明：用户在 iframe 内发送消息（文本 / 图片）时触发，传递消息核心参数。
  • 传输字段（通用字段 + 类型专属字段）：

通用字段

类型

说明

枚举 / 示例值

channel

number

消息发送渠道

10=webchat，5=viber，8=line，2=whatsapp

customer_id

string

发送消息用户 ID

2073673818

saas_conversation_id

string

会话唯一标识

1182975032053788672

message_type

string

消息类型

text = 文本，image = 图片

 

  • 文本消息专属字段：

字段名

类型

说明

示例值

content

string

文本消息内容

Hello

 

  • 图片消息专属字段：

 

8. newMessageEvent（收到消息事件）

  • 事件说明：iframe 接收到新消息（如坐席回复）时触发，传递消息来源、内容等关键信息。
  • 传输字段：

字段名

类型

说明

示例值

message_type

string

消息类型

text = 文本（当前示例仅文本）

content

string

消息内容

哈哈哈

channel

number

消息接收渠道

10=webchat，5=viber，8=line，2=wa

saas_conversation_id

string

所属会话唯一标识

1182975032053788672

created_at

string

消息创建时间（UTC+8）

2025-10-09 09:33:24

full_name

string

消息发送方名称

Anonymous501695

 

  • 示例数据：json
{
  "type": "newMessageEvent",
  "content": {
    "message_type": "text",
    "content": "Hello",
    "channel": 10,
    "customer_id": "2073673818",
    "saas_conversation_id": "1182975032053788672",
    "created_at": "2025-10-09 09:33:24",
    "full_name": "Anonymous501695"
  }
}

 

 

 

消息事件示例

[
  {
    "type": "tokenInvalid",//token失效
    "content": {}
  },
  {
    "type": "login",//邮箱登录，手机登录的话字段是phone
    "content": {
      "email": "chen.nanfeng@nxcloud.com"
    }
  },
  {
    "type": "digitalAgentExists",//是否有坐席 0离线，1在线
    "content": {
      "code": 1
    }
  },
  {
    "type": "unreadCount",//未读消息数
    "content": {
      "count": 0
    }
  },
  {
    "type": "unreadCount",
    "content": {
      "count": 0
    }
  },
  {
    "type": "unreadCount",
    "content": {
      "count": 0
    }
  },
  {
    "type": "digitalAgentStatus",
    "content": {
      "code": 0
    }
  },
  {
    "type": "logout",//退出登录
    "content": {}
  },
  {
    "type": "login",
    "content": {
      "email": "chen.nanfeng@nxcloud.com"
    }
  },
  {
    "type": "digitalAgentExists",
    "content": {
      "code": 1
    }
  },
  {
    "type": "unreadCount",
    "content": {
      "count": 0
    }
  },
  {
    "type": "digitalAgentStatus",
    "content": {
      "code": 0
    }
  },
  {
    "type": "sendMessageEvent",//发送消息事件
    "content": {
      "content": "Hello",//文本消息内容
      "channel": 10,//渠道 10-webchat  5-viber  8-line  2-whatsapp
      "customer_id": "2073673818",
      "type": 1,
      "preview_url": false,
      "translate": false,
      "business_whats_app_phone": "webchat",
      "saas_conversation_id": "1182975032053788672",
      "message_type": "text",//发送的消息类型
      "message": {
        "text": "Hello"
      }
    }
  },
  {
    "type": "sendMessageEvent",
    "content": {
      "channel": 10,
      "customer_id": "2073673818",
      "type": "3",
      "filename": "webchat-20250620171928-ae8376ff-8b39-4ee8-aa2e-f8509feca9d6-.png",
      "mime_type": "image/png",
      "media_id": "7a72ff03-7181-4172-bb77-4589d06fd670-584123",
      "media_link": "https://omni-dev.oss-accelerate.aliyuncs.com/7a72ff03-7181-4172-bb77-4589d06fd670-584123",
      "preview_url": false,
      "business_whats_app_phone": "webchat",
      "saas_conversation_id": "1182975032053788672",
      "message_type": "image",
      "message": {
        "filename": "webchat-20250620171928-ae8376ff-8b39-4ee8-aa2e-f8509feca9d6-.png",
        "media_id": "7a72ff03-7181-4172-bb77-4589d06fd670-584123",
        "url": "https://omni-dev.oss-accelerate.aliyuncs.com/7a72ff03-7181-4172-bb77-4589d06fd670-584123"
      }
    }
  },
  {
    "type": "newMessageEvent",//收到消息的事件
    "content": {
      "from": "1759972825966501695",
      "to": "",
      "message_id": "wg-b25fa5120a5448ae828997302b9221d3",
      "channel": 10,
      "status": "2",
      "chat_type": 1,
      "message_type": "text",
      "content": "Hello",
      "media_id": "",
      "media_link": "",
      "filename": "",
      "created_at": "2025-10-09 09:33:24",
      "customer_id": "2073673818",
      "user_id": 584,
      "user_name": "chen.nanfeng@nxcloud.com",
      "message_status": 2,
      "general_user_msg_status": "unread",
      "saas_conversation_id": "1182975032053788672",
      "tenant_id": 123,
      "user_channel_id": "webchat",
      "waba_id": "webchat",
      "emoji_flag": false,
      "full_name": "Anonymous501695",
      "messageSource": 0,
      "blacklisted": false,
      "anonymous": true
    }
  },
]

 

 

Digital Iframe简单示例 

 

<template>
  <iframe
    ref="iframeref"
    allow="autoplay *;"
    :src="digitalIframeUrl"
  ></iframe>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from "vue";

export default defineComponent({
  setup() {
    const iframeref = ref();
    const state = reactive({
      digitalIframeUrl: "https://nxlink.nxcloud.com/admin/iframe/digital/index.html",
    });

    onMounted(() => {
      
    });

    window.addEventListener(
      "message",
      (event) => {
        if (event.data.type == "login") {
          console.log("登录成功", event.data);
        }
        if (event.data.type == "logout") {
          console.log("登出", event);
        }
        if (event.data.type == "tokenInvalid") {
          console.log("token失效", "token失效");
        }
        if (event.data.type == "digitalAgentExists") {
          console.log("digital是否存在坐席", event.data);
        }
        if (event.data.type == "digitalAgentStatus") {
          console.log("digital坐席状态", event.data);
        }
        if (event.data.type == "newMessageEvent") {
          console.log("digital 收到新消息", event.data);
        }
        if (event.data.type == "sendMessageEvent") {
          console.log("digital 发送消息", event.data);
        }
        if (event.data.type == "unreadCount") {
          console.log("digital 未读消息数", event.data);
        }
      },
      false
    );
    return {
      ...toRefs(state),
      iframeref,
    };
  },
});
</script>

 

 

上一个
移动端使用
最近修改: 2025-12-16