Xuất bản trên Wix / Squarespace / Khác

Trên WordPress? Sử dụng plugin Naviplus Menu Builder chuyên dụng thay vì nhúng thủ công bên dưới — không cần chỉnh sửa giao diện, đặt Grid qua shortcode hoặc khối Gutenberg.

Trên Shopify? Cài đặt ứng dụng Shopify chuyên dụng — nó được tối ưu hóa cho nền tảng với các tùy chọn xuất bản tích hợp.

Trang này đề cập đến phương pháp nhúng mã thủ công, đây là con đường đúng cho Wix, Squarespace, Webflow, Magento, và các trang web tùy chỉnh được xây dựng bằng PHP, Node.js, hoặc HTML thuần. Bạn có các phương pháp triển khai sau:

1. Nhúng Navi+ vào Trang Web của Bạn

Phương pháp triển khai này phù hợp cho tất cả các loại menu mà Navi+ hiện hỗ trợ, bao gồm: Tabbar, Mega menu, Slide menu, FAB, và Grid menu. Mã này chỉ cần được sử dụng một lần cho tất cả các menu.

<!-- Chèn mã này vào <head> của trang web. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Chèn mã này vào <head> của trang web -->

Câu hỏi thường gặp (FAQ)

Mã token là gì?

Mỗi tài khoản Navi+ được gán một mã token duy nhất. Bạn có thể xem và sao chép mã token này trực tiếp từ tiêu đề ứng dụng. Mã token được sử dụng để xuất bản menu của bạn một cách an toàn.

https://live.naviplus.app/start.js là gì?

Đây là URL cố định của Navi+ chứa logic khởi tạo của ứng dụng. Mã này nhẹ (khoảng 4KB), cho phép nó tải nhanh trên hầu hết các thiết bị và điều kiện mạng. Nó được cung cấp qua Cloudflare và BunnyCDN để đảm bảo hiệu suất toàn cầu ổn định và tương thích đáng tin cậy với các trình duyệt hiện đại.

Sử dụng phương pháp tải không đồng bộ cũng có nghĩa là nó không ảnh hưởng đến quá trình tải trang web.

Mã nhúng này có làm chậm trang web của tôi không?

Mã dưới đây cực kỳ nhẹ và có thể được chèn vào trang web của bạn mà không ảnh hưởng đến tốc độ (chỉ mất khoảng 100-200ms cho lần tải đầu tiên và 0ms cho các lần tải tiếp theo), trải nghiệm của khách hàng, hoặc điểm SEO.

Nơi tốt nhất để chèn đoạn mã này là đâu?

Trong phần đầu (hoặc càng sớm càng tốt). Tại sao? Trang web sẽ tải tài nguyên theo thứ tự để hiển thị giao diện. Đặt Navi+ sớm nhất trong mã HTML sẽ giúp menu của bạn sẵn sàng hiển thị càng sớm càng tốt bằng cách chờ cho đến khi các điều kiện được đáp ứng, sau đó menu sẽ ngay lập tức xuất hiện. Điều này cải thiện trải nghiệm người dùng.

Làm thế nào tôi có thể biết mã này đã được nhúng thành công trên trang web của tôi chưa?

Có hai cách:

Phương pháp 1 (dành cho mọi người):

Mở trang web của bạn với hậu tố #navidebug-on, ví dụ: https://domain.com#navidebug-on. Nếu trang web chuyển sang chế độ Debug, mã nhúng đang hoạt động đúng. Chế độ Debug giúp bạn dễ dàng xác định các bộ chọn CSS. Sử dụng #navidebug-off để tắt nó.

Phương pháp 2 (dành cho các nhà phát triển):

Mở công cụ kiểm tra của trình duyệt, đi đến tab Console, và tìm một thông điệp màu xanh lá cây: “Using Navi+..”. Thông điệp này cho biết rằng mã đã được nhúng thành công.

Sau khi nhúng mã trên, hãy vào ứng dụng Navi+ để cấu hình nơi và cách menu của bạn xuất hiện trên trang.

I.1. Hiểu về CSS Selector

CSS Selector là cách để nhắm đến một phần tử HTML cụ thể trên trang web của bạn. Navi+ sử dụng nó để biết chính xác nơi đặt menu của bạn — cho dù chèn nó trước hay sau một phần tử, hoặc thay thế hoàn toàn một phần tử hiện có.

Bạn không cần phải là nhà phát triển để sử dụng điều này. Navi+ cung cấp một trường nhập đơn giản nơi bạn nhập bộ chọn, và nó sẽ xử lý phần còn lại.

Để tìm CSS Selector chính xác cho trang web của bạn, bạn có thể sử dụng:

Chế độ Debug — công cụ tích hợp của Navi+: di chuột qua bất kỳ phần tử nào trên trang của bạn và ngay lập tức sao chép bộ chọn của nó
Browser DevTools — một phương pháp thủ công sử dụng công cụ kiểm tra tích hợp của trình duyệt của bạn

I.2. Ba tùy chọn xuất bản

Bước 1: Nhấn nút Xuất bản lên trang web trong ứng dụng Navi+.

Bước 2: Bật công tắc “Xuất bản menu bằng phương pháp Chèn/Thay thế”.

Bước 3: Nhập CSS Selector của bạn và chọn một trong ba tùy chọn xuất bản dưới đây.

Tùy chọn 1: Chèn Trước

Chèn menu Navi+ ngay lập tức trước phần tử đã chọn.

Ví dụ: CSS Selector main → menu Grid xuất hiện trên khu vực nội dung chính của trang, hiển thị như một phần đầy đủ.

Đây là thiết lập phổ biến nhất cho menu Grid trên các nền tảng không phải Shopify.

Các bộ chọn CSS phổ biến cho tùy chọn này:

main — hoạt động trên hầu hết các nền tảng (Webflow, Magento, các trang tùy chỉnh)
#main — một số nền tảng và giao diện tùy chỉnh
.main-content — nhiều nền tảng khác nhau

Không có trong danh sách này? Bạn có thể trò chuyện với một người hỗ trợ của Navi+ để được giúp đỡ ngay lập tức, hoặc sử dụng Chế độ Debug hoặc Browser DevTools để tự tìm.

Tùy chọn 2: Chèn Sau

Chèn menu Navi+ ngay lập tức sau phần tử đã chọn.

Ví dụ: CSS Selector header → menu Grid xuất hiện ngay dưới tiêu đề.

Các bộ chọn CSS phổ biến cho tùy chọn này:

header — hoạt động trên hầu hết các nền tảng
.header-wrapper — một số nền tảng
.site-header — nhiều nền tảng khác nhau

Tùy chọn 3: Thay thế

Thay thế hoàn toàn phần tử đã chọn bằng menu Navi+. Phần tử gốc sẽ bị ẩn và Navi+ sẽ chiếm chỗ của nó.

Hầu hết các nền tảng không có menu Grid tích hợp sẵn, vì vậy chế độ Thay thế hiếm khi áp dụng cho loại menu này. Chèn Trước main là phương pháp được khuyến nghị.

Nếu nền tảng của bạn có một phần tử điều hướng kiểu lưới mà bạn muốn thay thế, hãy sử dụng Chế độ Debug hoặc Browser DevTools để tìm CSS Selector của nó.

I.3. Nhắm mục tiêu theo thiết bị

Bạn có thể kiểm soát xem CSS Selector có áp dụng trên di động, máy tính để bàn, hoặc cả hai bằng cách thêm hậu tố vào bộ chọn của bạn:

Hậu tố	Áp dụng cho
`(M)`	Chỉ di động
`(D)`	Chỉ máy tính để bàn
(không có)	Cả di động và máy tính để bàn

Ví dụ:

main(D) — chỉ chèn trên máy tính để bàn
main(M) — chỉ chèn trên di động
main — chèn trên cả hai nền tảng

Điều này hữu ích khi bạn muốn menu Grid chỉ xuất hiện trên một số thiết bị nhất định, hoặc khi bạn cần vị trí khác nhau trên di động so với máy tính để bàn.

Mã dưới đây có thể được sử dụng nhiều lần trên một trang web với thông tin chèn khác nhau (đặc biệt là Embeded ID, chẳng hạn như SF-123456789). Khi trang web được hiển thị, menu sẽ được triển khai và hiển thị tại vị trí mà mã được chèn khi các điều kiện được đáp ứng. Loại menu này phù hợp cho: Mega menu, Grid, v.v.

<!-- Chèn mã nơi menu SF-123456789 xuất hiện. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456",
   embed_id: "SF-123456789"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Chèn mã nơi menu SF-123456789 xuất hiện -->

Quan trọng: Mã trên sử dụng mã nhúng mẫu SF-123456789. Hãy chắc chắn thay thế nó bằng mã nhúng menu thực tế của bạn.

Navi+ Help — Build menus that convert visitors into buyers