Hướng dẫn cài đặt ứng dụng nhắn tin Notiondesk trên trang web của bạn

Ứng dụng Messenger đưa trung tâm trợ giúp của bạn trực tiếp vào trang web hoặc ứng dụng web của bạn.

Khách truy cập có thể sử dụng Messenger để tìm kiếm trong trung tâm trợ giúp của bạn, đọc bài viết, trò chuyện với trợ lý AI, xem cập nhật nhật ký thay đổi và liên hệ với nhóm của bạn mà không cần rời khỏi trang web.

Hướng dẫn này giải thích cách cài đặt Notiondesk Messenger trên một trang web thông thường.

Trước khi bạn bắt đầu

Trước khi cài đặt Notiondesk Messenger, hãy đảm bảo bạn đã có:

• Trung tâm trợ giúp Notiondesk

• Một Messenger được cấu hình trong Notiondesk

• Truy cập vào mã nguồn trang web của bạn hoặc các thiết lập mã tùy chỉnh trên toàn trang web.

• Đoạn mã cài đặt Messenger độc nhất của bạn Notiondesk

Nếu bạn muốn khách truy cập sử dụng trợ lý AI bên trong Messenger, hãy cấu hình cả Chatbot AI Notiondesk nữa. Xem phần Thiết lập và kích hoạt Chatbot AI .

Chọn phương pháp cài đặt

Hãy sử dụng phương pháp cài đặt phù hợp với trang web của bạn.

Đối với hầu hết các trang web truyền thống, đoạn mã JavaScript là phương pháp cài đặt đơn giản nhất.

Cài đặt Messenger trên một trang web thông thường

1. Sao chép mã cài đặt Messenger của bạn.

Mở cài đặt Messenger của bạn trong Notiondesk và tìm mục Cài đặt .

Sao chép đoạn mã cài đặt được tạo cho Messenger của bạn.

Mã có định dạng như sau:

YOUR_MESSENGER_ID xác định Messenger cần được tải trên trang web của bạn.

Sao chép đoạn mã từ bảng điều khiển Notiondesk của riêng bạn thay vì sao chép ID Messenger từ một trang web hoặc tài khoản khác.

2. Thêm đoạn mã vào trang web của bạn

Dán đoạn mã Messenger ngay trước thẻ đóng </body>:

Nếu trang web của bạn sử dụng bố cục, mẫu, chân trang hoặc đoạn mã tùy chỉnh chung cho toàn bộ trang web, hãy thêm đoạn mã đó một lần để Messenger được tải trên toàn bộ trang web.

Nếu Messenger chỉ nên xuất hiện trên các trang cụ thể, hãy chỉ chèn đoạn mã đó vào những trang đã chọn.

3. Xuất bản các thay đổi của bạn

Sau khi thêm đoạn mã, hãy lưu và triển khai hoặc xuất bản trang web của bạn.

Mã Messenger phải có trên trang web đã được xuất bản. Việc chỉ thêm mã vào phiên bản cục bộ hoặc chưa được xuất bản sẽ không giúp người truy cập sử dụng được Messenger.

<script
  async
  src="https://static.notiondesk.help/messenger/widget.js"
  data-messenger-id="YOUR_MESSENGER_ID">
</script>

<body>
  <!-- Your website -->

  <script
    async
    src="https://static.notiondesk.help/messenger/widget.js"
    data-messenger-id="YOUR_MESSENGER_ID">
  </script>
</body>

Xác minh quá trình cài đặt

Mở trang web đã được xuất bản trong trình duyệt của bạn.

Quá trình cài đặt thành công sẽ tải trình khởi chạy Messenger Notiondesk trên các trang chứa mã cài đặt.

Mở Messenger và kiểm tra xem nội dung Notiondesk như mong đợi có hiển thị hay không.

Bạn có thể thử nghiệm:

• Mở và đóng Messenger

• Tìm kiếm trong trung tâm trợ giúp của bạn

• Mở một bài viết

• Bắt đầu cuộc trò chuyện với AI nếu Chatbot AI được kích hoạt.

• Mở bất kỳ mục nào khác của Messenger mà bạn đã bật.

Nếu Messenger không hiển thị, hãy mở công cụ dành cho nhà phát triển của trình duyệt và kiểm tra xem tiện ích có tải thành công hay không.

React, Next.js, Vue, Nuxt và SPAs

React, Next.js, Vue, Nuxt và các ứng dụng trang đơn khác nên sử dụng gói @notiondesk-so/messenger-js-sdk chính thức thay vì thêm thủ công đoạn mã script tiêu chuẩn.

Cài đặt gói bằng lệnh:

Bạn cũng có thể cài đặt nó bằng Yarn hoặc pnpm.

Bộ SDK cung cấp các tích hợp chuyên dụng cho:

npm install @notiondesk-so/messenger-js-sdk

• JavaScript và TypeScript

• Phản ứng

• Next.js

• Vue

• Nuxt

Bộ SDK cũng cung cấp các phương thức để hiển thị, ẩn, bật/tắt, cấu hình và hủy Messenger.

Việc tích hợp khung phải khởi tạo Notiondesk Messenger ở phía máy khách. Không khởi tạo SDK Messenger trong quá trình kết xuất phía máy chủ.

Không nên cài đặt cả đoạn mã Messenger tiêu chuẩn và SDK trong cùng một ứng dụng trừ khi bạn cố ý quản lý các phiên bản Messenger riêng biệt.

Để thiết lập khung phần mềm hoàn chỉnh, hãy xem hướng dẫn Cài đặt Messenger với React và Next.js.

Khắc phục sự cố