Skip to content
NextCore Docs NextCore Browser Tiếng Việt homestaynextcore.org
On this page

Embed the NextCore chat widget on your website

One line of script puts the NextCore CRM chat bubble on your website, with messages going straight into the CRM inbox.

Updated 02/11/20262 min read

Get the embed code

homestaynextcore.org › NEXTCORE CRM › Cài đặt (Settings) › Quản lý (Management) › Ô chat website (Website chat box) (/dashboard/nextcore-crm/widget) › Tạo widget (Create widget). The Đoạn mã nhúng (Embed code) block has a Sao chép (Copy) button. Each widget has an embed key (data-site-key) of the form wk_…: it is a public key, not a secret.

Only the business owner or a manager can create and customize widgets. On the same screen you can edit the Tên widget (Widget name), Tiêu đề khung chat (Chat window title), Lời chào (Greeting), Màu chủ đạo (Main color), Vị trí (Position) (Phải dưới (Bottom right) / Trái dưới (Bottom left)) and turn the widget on or pause it.

Add it to your page

Paste before </body>:

html
<script src="https://homestaynextcore.org/widget/embed.js" data-site-key="wk_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>

Or configure it with a global variable before loading the script:

html
<script>
  window.NextCoreCRM = { siteKey: 'wk_xxxxxxxxxxxxxxxxxxxxxxxx', position: 'bottom-left' }
</script>
<script src="https://homestaynextcore.org/widget/embed.js" async></script>
Attribute Value Default
data-site-key / siteKey the channel's site key required
data-position / position bottom-right · bottom-left bottom-right
data-color / color bubble color the color set in the channel

How it works

The script only creates one isolated iframe pointing to homestaynextcore.org/crm-widget. The whole interface and all API calls live inside that iframe, so your page's CSS and JavaScript do not affect the chat window, and vice versa.

Domain restrictions

Use the Tên miền cho phép nhúng (Domains allowed to embed) field in the widget settings (one domain per line). When the list is set, messages sent from pages outside the list are rejected. Leave it empty to allow every domain.

Open the chat window from code

Once the script has loaded, call:

js
window.NcCrmChat.mo({ nhap: 'Tôi muốn hỏi về phòng ngày 20/10' })

nhap (optional, up to 500 characters) only pre-fills text in the compose box and does not send it: the visitor can edit it before clicking send.

The old way still works: the parent page sends a command straight into the iframe.

js
const f = document.querySelector('iframe[src*="/crm-widget"]')
f.contentWindow.postMessage({ type: 'nccrm:mo', nhap: 'Tôi muốn hỏi về phòng ngày 20/10' }, 'https://homestaynextcore.org')

Single-page websites (SPA)

On Next.js, React Router and similar sites, navigating between pages does not reload the iframe. The script tells the chat window every time the page address changes (pushState, replaceState, the Back button), so the assistant always knows which page the visitor is on. You do not need to do anything else.

Near the page footer, the bubble moves up automatically so it does not cover buttons or links at the bottom of the page, without shifting the layout.

Was this article helpful?