Digital Iframe Login Page
Login URL: https://nxlink.nxcloud.com/admin/#/digital_iframe_test
Digital Iframe Home Page
Displays the list of ongoing conversations.
Supported Filters:
-
Time range Selection
-
Customer name
-
WhatsApp
-
Customer Segmentation
-
Conversation Status
-
Mark Status
-
Processing status
-
Conversation Type
Unassigned Page
Displays chats that have not yet been assigned (including chats that entered the digital virtual agent).
Supports:
-
Filtering by agent group
Customer List Page
Displays all customers and my customers.
Clicking a customer allows editing of:
-
Basic information
-
Custom fields
-
Remarks
Settings Page
Supported Features:
-
Status toggle (Online / Offline)
-
Team switching
-
General settings – Time zone configuration
-
Language: switch language (Chinese / English)
-
New message notifications
-
Enable/disable notifications
-
Select notification sound
-
-
Device list (displays devices currently logged in to this account)
-
About NXLINK (view current NXLINK version)
Iframe ↔ Parent Page Communication Event Specification
1. tokenInvalid (Token Invalid Event)
Event Description:
Triggered when the user’s current token is expired or invalid.
Payload:
None
Example Data:
{ "type": "tokenInvalid" }
2. login (Login Event)
Event Description:
Triggered after the user successfully logs in using email or phone. Used to pass the login account information to the parent page.
Payload Fields
| Field Name | Type | Description | Example |
|---|---|---|---|
| string | Login user email (email login) | chenxxxxxx@xxxxxx.com | |
| phone | string | Login phone number (phone login) | 13811111234 |
Example Data
{ "type": "login", "content": { "email": "chenxxxxxx@xxxxxx.com" } }
{ "type": "login", "content": { "phone": "13811111234" } }
3. logout (Logout Event)
Event Description:
Triggered when the user actively logs out or is forcefully logged out by the system. The parent page should clear the login state.
Payload: None
Example Data
{ "type": "logout" }
4. digitalAgentExists (Agent Availability Permission Event)
Event Description:
Returns whether there are available digital agents, used by the parent page to display agent service availability.
Payload Fields
| Field Name | Type | Description | Enum Values |
| code | number | Agent availability status code | 1 = Agent permission exists, 2 = No agent permission |
Example Data
{ "type": "digitalAgentExists", "content": { "code": 1 } }
5. digitalAgentStatus (Agent Service Status Event)
Event Description:
Returns the specific service status of the agent (e.g. online, offline). The meaning of code should follow business definitions.
Payload Fields
| Field Name | Type | Description | Example |
| code | number | Agent online status code | 0 = Offline, 1 = Online |
Example Data
{ "type": "digitalAgentStatus", "content": { "code": 0 } }
6. unreadCount (Unread Message Count Event)
Event Description:
Returns the total number of unread messages in real time, used by the parent page to display badges or counters.
Payload Fields
| Field Name | Type | Description | Example |
| count | number | Number of unread messages | 0 (none), 5 (five unread) |
Example Data
{ "type": "unreadCount", "content": { "count": 0 } }
7. sendMessageEvent (Send Message Event)
Event Description:
Triggered when the user sends a message (text or image) inside the iframe. Passes core message parameters to the parent page.
Common Payload Fields
| Field Name | Type | Description | Enum / Example |
| channel | number | Message channel | 10 = webchat, 5 = viber, 8 = line, 2 = whatsapp |
| customer_id | string | Customer ID | 2073673818 |
| saas_conversation_id | string | Unique conversation identifier | 1182975032053788672 |
| message_type | string | Message type | text, image |
Text Message Specific Fields
| Field Name | Type | Description | Example |
| content | string | Text message content | Hello |
Image Message Specific Fields
| Field Name | Type | Description | Example |
| filename | string | Image file name | webchat-2025062017...png |
| media_link | string | Image access URL | https://omni-dev.oss-accelerate.aliyuncs.com/... |
8. newMessageEvent (Receive Message Event)
Event Description:
Triggered when the iframe receives a new message (e.g. agent reply). Passes message source and content details.
Payload Fields
| Field Name | Type | Description | Example |
| message_type | string | Message type | text |
| content | string | Message content | Hello |
| channel | number | Message channel | 10 = webchat, 5 = viber, 8 = line, 2 = whatsapp |
| saas_conversation_id | string | Conversation identifier | 1182975032053788672 |
| created_at | string | Message creation time (UTC+8) | 2025-10-09 09:33:24 |
| full_name | string | Sender display name | Anonymous501695 |
Example Data
{
"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"
}
}
9. Click to Chat (Redirect to the specified customer chat page)
const message = {
type: 'chatToCustomer',
data: {
whatsapp: "1234567890",
businessNumber: "1234567890"
}
}
const mapFrame = document.getElementById("iframe")
const iframeWin = mapFrame.contentWindow;
iframeWin.postMessage(message, '*');
Message Event Stream Example
[
{
"type": "tokenInvalid",
// Token expired / invalid
"content": {}
},
{
"type": "login",
// Email login (use `phone` field for phone login)
"content": {
"email": "chen.nanfeng@nxcloud.com"
}
},
{
"type": "digitalAgentExists",
// Agent availability: 0 = offline, 1 = online
"content": {
"code": 1
}
},
{
"type": "unreadCount",
// Unread message count
"content": {
"count": 0
}
},
{
"type": "unreadCount",
"content": {
"count": 0
}
},
{
"type": "unreadCount",
"content": {
"count": 0
}
},
{
"type": "digitalAgentStatus",
// Agent service status
"content": {
"code": 0
}
},
{
"type": "logout",
// User 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",
// Send message event
"content": {
"content": "Hello",
// Text message content
"channel": 10,
// Channel: 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 type
"message": {
"text": "Hello"
}
}
},
{
"type": "sendMessageEvent",
// Send image message event
"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",
// Receive message event
"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 – Simple Integration Example
<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(() => {
// Logic to be executed after the iframe is mounted
});
window.addEventListener(
"message",
(event) => {
if (event.data.type == "login") {
console.log("Login successful", event.data);
}
if (event.data.type == "logout") {
console.log("Logout", event);
}
if (event.data.type == "tokenInvalid") {
console.log("Token invalid", "Token invalid");
}
if (event.data.type == "digitalAgentExists") {
console.log("Whether a digital agent exists", event.data);
}
if (event.data.type == "digitalAgentStatus") {
console.log("Digital agent status", event.data);
}
if (event.data.type == "newMessageEvent") {
console.log("Digital received a new message", event.data);
}
if (event.data.type == "sendMessageEvent") {
console.log("Digital sent a message", event.data);
}
if (event.data.type == "unreadCount") {
console.log("Digital unread message count", event.data);
}
},
false
);
return {
...toRefs(state),
iframeref,
};
},
});
</script>