NXLINK IFrame Integration API Documentation and Guide

This document applies to CRM systems or other business systems embedding the NXLINK IFrame and sending customer WhatsApp conversation parameters to the IFrame via postMessage.

1. Demo Example

On the left panel, enter the customer’s WhatsApp number and the merchant’s WhatsApp number, then click Start Chat to jump directly to the chat page displayed on the right.

2. Integration URL

The current NXLINK iframe URL used in the example:

https://app.nxlink.ai/admin/#/

Corresponding origin:

https://app.nxlink.ai

Example code:

const iframeUrl = 'https://app.nxlink.ai/admin/#/'
const iframeOrigin = new URL(iframeUrl).origin

3. IFrame Embedding Method

Recommended iframe configuration:

<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>

Description

Attribute	Description
`src`	NXLINK page URL
`name`	Allows access to the iframe window via `window.frames['nxlink-iframe']`
`allow`	Grants permission for microphone, camera, autoplay, and clipboard access
`referrerpolicy`	Controls the Referer sending policy; does not directly determine cookie availability

In the actual example, src is dynamically assigned in script.js:

elements.iframe.src = iframeUrl

4. Sending Messages

The CRM page sends messages to the NXLINK iframe using window.postMessage.

4.1 Message Type

chatToCustomer

4.2 Request Structure

{
  type: 'chatToCustomer',
  data: {
    whatsapp: '<Customer WhatsApp Number>',
    businessNumber: '<WA Business Number>'
  }
}

Field Description

Field	Type	Required	Description
`type`	string	Yes	Fixed value: `chatToCustomer`
`data.whatsapp`	string	Yes	Customer WhatsApp phone number
`data.businessNumber`	string	Yes	WhatsApp Business number

4.3 Sending Example

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)

In the current v2-static example, the message is sent once when clicking Send message:

iframeWindow.postMessage(message, iframeOrigin)

Do not use '*' as targetOrigin in production code.

Use an explicit origin instead:

https://app.nxlink.ai

5. Complete Minimal Example

<!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>

Mobile Device Usage

Last modified: 2026-07-03

Outline