Publish on WordPress / WooCommerce / Wix / Others

If you deploy your website on Shopify, please install the dedicated Shopify app here: https://apps.shopify.com/pronavi-navigation-design - It is optimized for this platform, allowing for stable deployment with many useful built-in options.

If you deploy your website on other platforms (such as WordPress, WooCommerce, Wix, Squarespace, Webflow, Magento, and custom websites built with PHP, Node.js, or pure HTML..), you have the following implementation methods:

1. Embed Navi+ on Your Website

The code below is extremely lightweight and can be inserted into your website without affecting speed (only taking about 100-200ms for the first load and 0ms for subsequent loads), customer experience, or SEO scores. This implementation method is suitable for all menu types that Navi+ currently supports, including: Tabbar, Mega menu, Slide menu, FAB, and Grid menu. This code only needs to be used once for all menus.

Best position to insert into your website: in the head section (or as early as possible). Why? The website will sequentially load resources to render the interface. Placing Navi+ earliest in the HTML code will help your menu be ready to display as soon as possible by waiting until conditions are met, then the menu will immediately appear. This improves user experience.

<!---- Navi+ embed code ---->
<script
  type="application/javascript"
  src="https://live.naviplus.app/start.js"
  shop="[your-domain.com]"
  async  
  onerror="var t=this,s=document.createElement('script'); for(var i=0;i<t.attributes.length;i++){ var a=t.attributes[i];if(a.name!=='src' && a.name!=='onerror') s.setAttribute(a.name,a.value);} s.src='https://flov.naviplus.app/start.js';document.head.appendChild(s);">
</script>

Important Notes:

You need to fill in your information in [your-domain.com], matching the domain declaration you created in the backend at https://dash.naviplus.io. If this information is invalid, the menu will not display on your website. You need to enter the normalized domain information - without subdomain (but it will still display on all subdomains) - see examples below for clarity:

Valid cases:

  • your-domain.com: The menu will be deployed on all main domains and subdomains of this domain such as: your-domain.com, blogs.your-domain.com, chat.guide.your-domain.com
  • Other valid examples: your-domain.ai (accepts all common extensions), Your-Domain.com.jp (characters will be automatically lowercased), you-domain.co.uk, tên-miền.com.vn (country domains are accepted), tên-miền.com.vn (special characters or accented characters valid in domain names are accepted)

Non-standard cases (not recommended):

  • www.your-domain.com, info.your-domain.com
  • In these cases, the www. and info. subdomain parts will be stripped, leaving the root domain as your-domain.com, and it will work normally as in the cases above. However, you should remove unnecessary subdomain parts to make maintenance easier and keep the product configuration clean.

Invalid cases:

  • localhost, 127.0.0.1:8080 (Local test environments will not be able to display the menu)
  • https://your-domain.com/index.php?v=123#toProduct (Too much “clutter” in your declaration such as https://, index.php, ?v=123, #toProduct… Navi+’s algorithm will not be able to display the menu correctly)

FAQ (Frequently Asked Questions)

What is https://live.naviplus.app/start.js?

This is Navi+'s unique and fixed URL containing the entire application initialization logic. This script file is extremely lightweight — only 2KB — so it loads almost instantly on all devices and network conditions. The system can handle unlimited requests, even at tens of millions of visits per day, without creating any latency.

The script is simultaneously distributed on two of the world's leading CDNs: Cloudflare and BunnyCDN, ensuring optimal speed globally. Thanks to the multi-cluster distribution mechanism and ultra-stable infrastructure of these two providers, the error rate is nearly 0 (approximately 0.00001%), and it works perfectly on all modern browsers.

What is "async"?

This script is written following the async standard, meaning it loads in parallel and does not block any component of the website. The browser continues to render normally while the script loads in the background, ensuring maximum speed without affecting your page performance.

What is "onerror"? I don't understand it

Navi+ is simultaneously distributed on two of the world's leading CDNs: Cloudflare and BunnyCDN, providing extremely strong load capacity — virtually no latency, even when traffic spikes suddenly.

The onerror mechanism is used as an automatic failover system: if Cloudflare encounters an error (probability around 0.001%), the browser will immediately switch to loading from BunnyCDN (which also has only a 0.001% error probability). Thanks to this dual redundancy mechanism, Navi+'s actual error rate is nearly 0 — only about 0.00001%.

2. Insert a Navi+ Menu at Any Point on Your Website

The code below can be used multiple times on a website with different insertion information (especially the Embeded ID, such as SF-123456789). When the website is rendered, the menu will be deployed and displayed at the position where the code is inserted when conditions are met. This menu type is suitable for: Mega menu, Grid, etc.

<!---- Navi+ insert menu SF-123456789 ---->
<div class="naviman_app section_naviman_app" id="[SF-123456789]-container"></div>
<script
  type="application/javascript"
  src="https://dev-shopify.naviplus.app/naviplus/frontend/start.js.php"
  shop="[your-domain.com]"
  embed_id="[SF-123456789]"
  async  
  onerror="var t=this,s=document.createElement('script'); for(var i=0;i<t.attributes.length;i++){ var a=t.attributes[i];if(a.name!=='src' && a.name!=='onerror') s.setAttribute(a.name,a.value);} s.src='https://flov.naviplus.app/start.js';document.head.appendChild(s);">
</script>

Important Notes:

You need to fill in your information in [your-domain.com], matching the domain declaration you created in the backend at https://dash.naviplus.io. You also need to fill in the Embeded ID information of the menu (in the format SF-123456789) into 2 places in the code above. Note: do not keep the [] brackets when filling in and replacing in the code.

Other information is similar to case 1, which you can refer to above.