Publicar en WordPress / WooCommerce / Wix / Otros

Si despliega su sitio web en Shopify, por favor instale la aplicación dedicada de Shopify aquí: https://apps.shopify.com/pronavi-navigation-design - Está optimizada para esta plataforma, permitiendo un despliegue estable con muchas opciones útiles integradas.

Si despliega su sitio web en otras plataformas (como WordPress, WooCommerce, Wix, Squarespace, Webflow, Magento, y sitios web personalizados construidos con PHP, Node.js, o HTML puro..), tiene los siguientes métodos de implementación:

1. Incrustar Navi+ en Su Sitio Web

Este método de implementación es adecuado para todos los tipos de menú que Navi+ actualmente soporta, incluyendo: Tabbar, Mega menu, Slide menu, FAB, y Grid menu. Este código solo necesita ser utilizado una vez para todos los menús.

<!-- Insert this code to the <head> of website. (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;
<!-- Insert this code to the <head> of website -->

FAQ (Preguntas Frecuentes)

¿Qué es el token?

Cada cuenta de Navi+ se le asigna un token único. Puede ver y copiar este token directamente desde el encabezado de la aplicación. El token se utiliza para publicar su menú de forma segura.

¿Qué es https://live.naviplus.app/start.js?

Esta es la URL fija de Navi+ que contiene la lógica de inicialización de la aplicación. El script es ligero (alrededor de 4KB), lo que permite que se cargue rápidamente en la mayoría de los dispositivos y condiciones de red. Se entrega a través de Cloudflare y BunnyCDN para proporcionar un rendimiento global estable y una compatibilidad confiable con navegadores modernos.

Usar el método de carga asíncrona también significa que no afecta el proceso de carga del sitio web.

¿Este código de incrustación ralentiza mi sitio web?

El código a continuación es extremadamente ligero y se puede insertar en su sitio web sin afectar la velocidad (solo toma alrededor de 100-200ms para la primera carga y 0ms para cargas posteriores), la experiencia del cliente, o las puntuaciones de SEO

¿Cuál es el mejor lugar para insertar este fragmento de código?

En la sección de encabezado (o tan pronto como sea posible). ¿Por qué? El sitio web cargará secuencialmente los recursos para renderizar la interfaz. Colocar Navi+ lo más temprano posible en el código HTML ayudará a que su menú esté listo para mostrarse tan pronto como sea posible, esperando hasta que se cumplan las condiciones, luego el menú aparecerá inmediatamente. Esto mejora la experiencia del usuario.

¿Cómo puedo saber si este código se ha incrustado correctamente en mi sitio web?

Hay dos formas:

Método 1 (para todos):

Abra su sitio web con el sufijo #navidebug-on, por ejemplo: https://domain.com#navidebug-on. Si el sitio web cambia a modo de depuración, la incrustación está funcionando correctamente. El modo de depuración le ayuda a identificar fácilmente los selectores CSS. Use #navidebug-off para desactivarlo.

Método 2 (para desarrolladores):

Abra las herramientas de inspección de su navegador, vaya a la pestaña de Consola, y busque un mensaje verde: “Usando Navi+..”. Este mensaje indica que el código se ha incrustado correctamente.

2. Insertar un Menú Navi+ en Cualquier Punto de Su Sitio Web

El código a continuación se puede usar múltiples veces en un sitio web con diferentes información de inserción (especialmente el ID Embebido, como SF-123456789). Cuando el sitio web se renderiza, el menú se desplegará y mostrará en la posición donde se inserta el código cuando se cumplan las condiciones. Este tipo de menú es adecuado para: Mega menu, Grid, etc.

<!-- Insert the code where the menu SF-123456789 appears. (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;
<!-- Insert the code where the menu SF-123456789 appears -->

Importante: El código anterior utiliza el código de incrustación de muestra SF-123456789. Asegúrese de reemplazarlo con su código de incrustación de menú real.