Cài Website Chat trên Next.js
Nạp widget ở layout App Router bằng next/script và thông tin từ Studio.
Xem các bướcVị trí đặt mã
Sơ đồ đường dẫn trong giao diện nền tảng. Tên mục có thể khác đôi chút theo phiên bản hoặc ngôn ngữ tài khoản.
- app/layout.tsx
- next/script
- afterInteractive
- Deploy
app/layout.tsx
<Script
src="YOUR_STUDIO_WIDGET_SCRIPT_URL"
data-token="YOUR_CHANNEL_TOKEN"
data-server="YOUR_STUDIO_SERVER_URL"
strategy="afterInteractive"
/>Làm theo từng bước.
Mọi bước đều bắt đầu bằng mã cài đặt thật của kênh Website Chat; mã ví dụ trên trang tổng quan không dùng để triển khai.
-
Trong TrolyPage Studio, xuất bản kênh và sao chép mã cài đặt để lấy chính xác src, data-token và data-server.
-
Mở app/layout.tsx, import Script từ next/script và thêm một Script dùng strategy="afterInteractive" trong layout gốc.
-
Chuyển các thuộc tính src, data-token, data-server từ mã Studio sang Script; chỉ render một instance trên toàn app.
-
Triển khai ứng dụng, mở route công khai, kiểm tra widget và chọn Kiểm tra lại trong Studio.
Mẫu cho App Router
Thay ba giá trị bằng các giá trị trong mã Studio của chính kênh bạn.
import Script from 'next/script'
// Inside app/layout.tsx, within <body>:
<Script
src="YOUR_STUDIO_WIDGET_SCRIPT_URL"
data-token="YOUR_CHANNEL_TOKEN"
data-server="YOUR_STUDIO_SERVER_URL"
strategy="afterInteractive"
/>Nhờ ChatGPT hoặc Claude cài hộ
Dùng được cả khi website của bạn không có trong danh sách. Thay dòng giữ chỗ bằng mã nhúng từ Studio, chỉnh prompt nếu cần, rồi gửi cho AI có quyền truy cập website.
Nút dưới đây chỉ sao chép, không tự gửi dữ liệu. Nếu AI không có quyền sửa website, AI sẽ hướng dẫn bạn thao tác. Không chia sẻ mật khẩu hay API key quản trị.
Bạn có thể sửa nội dung trước khi sao chép.
Xác minh cài đặt
Mở một trang công khai có gắn mã. Khi widget tải, quay về mục Cài đặt của kênh trong Studio và nhấn Kiểm tra lại. Trạng thái chỉ xác nhận sau khi hệ thống nhận tín hiệu từ website thật.
Kiểm tra trong StudioNếu chưa thấy widget
- Không đưa token vào mã minh họa của tài liệu này. Token widget là mã công khai riêng của kênh, không phải API key quản trị.
- Xác nhận cấu hình kênh đã Xuất bản và domain website nằm trong danh sách cho phép.
- Kiểm tra mã chỉ xuất hiện một lần trên trang và không bị cache/CSP/chặn script cản trở.
- Mở trang công khai ở cửa sổ riêng tư rồi bấm Kiểm tra lại; bản xem trước của trình dựng trang không thay thế trang thật.
Thao tác trong giao diện nền tảng được đối chiếu với tài liệu chính thức. Đây là cách chèn mã, không phải tích hợp/plugin chính thức của TrolyPage trên nền tảng đó.
Xem tài liệu của Next.js