Publicar en Squarespace / Otros
¿En WordPress? Use el plugin dedicado Naviplus Menu Builder en lugar de la inserción manual a continuación — sin ediciones de tema, coloque el Mega Menu a través de shortcode o bloque de Gutenberg.
¿En Shopify? Instale la aplicación de Shopify dedicada — está optimizada para la plataforma con opciones de publicación integradas.
¿En Wix? Consulte la guía dedicada Publicar en Wix — instale la aplicación Navi+ desde el Mercado de aplicaciones de Wix y se integra automáticamente, sin código. La integración manual a continuación es solo para Squarespace, Webflow y sitios personalizados.
Esta página cubre el método de inserción de script manual, que es el camino correcto para Squarespace, Webflow, Magento, y sitios web personalizados construidos con PHP, Node.js, o HTML puro. Tiene los siguientes métodos de implementación:
1. Insertar 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 usado una vez para todos los menús.
<!-- Inserte este código en el <head> del sitio web. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
token: "NAVI123456"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Inserte este código en el <head> del sitio web -->
FAQ (Preguntas Frecuentes)
¿Qué es el token?
Cada cuenta de Navi+ se 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 inserción ralentiza mi sitio web?
El código a continuación es extremadamente ligero y puede ser insertado 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 del head (o lo más pronto posible). ¿Por qué? El sitio web cargará secuencialmente los recursos para renderizar la interfaz. Colocar Navi+ lo más temprano en el código HTML ayudará a que su menú esté listo para mostrarse lo antes posible al esperar 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 insertado 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 Debug, la inserción está funcionando correctamente. El modo Debug 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 insertado correctamente.
2. Publicar el menú usando Selector CSS (recomendado)
Después de insertar el script anterior, vaya a la aplicación Navi+ para configurar dónde y cómo aparece su menú en la página.
I.1. Entendiendo el Selector CSS
Un Selector CSS es una forma de apuntar a un elemento HTML específico en su página web. Navi+ lo utiliza para saber exactamente dónde colocar su menú — ya sea para insertarlo antes o después de un elemento, o para reemplazar uno existente por completo.
No necesita ser un desarrollador para usar esto. Navi+ proporciona un campo de entrada simple donde ingresa el selector, y se encarga del resto.
Para encontrar el Selector CSS correcto para su sitio web, puede usar:
- Modo Debug — la herramienta integrada de Navi+: pase el mouse sobre cualquier elemento en su página y copie instantáneamente su selector
- Browser DevTools — un método manual usando el inspector integrado de su navegador
I.2. Tres opciones de publicación
Paso 1: Haga clic en el botón Publicar en el sitio web en la aplicación Navi+.
Paso 2: Active el interruptor “Publicar menú por método Insertar/Reemplazar”.
Paso 3: Ingrese su Selector CSS y elija una de las tres opciones de publicación a continuación.
Opción 1: Insertar Antes
Inserta el menú de Navi+ inmediatamente antes del elemento seleccionado.
Ejemplo: Selector CSS main → el menú aparece sobre el área de contenido principal de la página.
Selectores CSS comunes para esta opción:
main— funciona en la mayoría de las plataformas (Webflow, Magento, sitios personalizados)#main— algunas plataformas y temas personalizados.main-content— varias plataformas
¿No está en esta lista? Puede chatear con un soporte de Navi+ para obtener ayuda instantánea, o usar Modo Debug o Browser DevTools para encontrarlo usted mismo.
Opción 2: Insertar Después
Inserta el menú de Navi+ inmediatamente después del elemento seleccionado.
Ejemplo: Selector CSS header → el menú aparece justo debajo del encabezado.
Esta es la configuración más común para un Mega Menu móvil.
Selectores CSS comunes para esta opción:
header— funciona en la mayoría de las plataformas.header-wrapper— algunas plataformas.site-header— varias plataformas
¿No está en esta lista? Puede chatear con un soporte de Navi+ para obtener ayuda instantánea, o usar Modo Debug o Browser DevTools para encontrarlo usted mismo.
Opción 3: Reemplazar
Reemplaza completamente el elemento seleccionado con el menú de Navi+.
Ejemplo: Selector CSS .old-menu → Navi+ reemplaza el viejo menú con el menú de Navi+.
Use esta opción si tiene un menú antiguo que desea reemplazar completamente.
Selectores CSS comunes para esta opción:
.old-menu— menú anterior#nav— elemento de navegación anterior.navigation— área de navegación anterior
¿No está en esta lista? Puede chatear con un soporte de Navi+ para obtener ayuda instantánea, o usar Modo Debug o Browser DevTools para encontrarlo usted mismo.