English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Ver demo Comenzar

Publicar en Wix / 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.

Esta página cubre el método de inserción de script manual, que es el camino correcto para 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. 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 utilizado 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>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- 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 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 insertado correctamente en mi sitio web?

Hay dos maneras:

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 de escritorio.

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 el elemento seleccionado por completo con el menú de Navi+. El elemento original se oculta y Navi+ toma su lugar.

Ejemplo: Selector CSS .main-nav → la navegación predeterminada del sitio se oculta y es reemplazada por su Mega Menu de Navi+.

Selectores CSS comunes para esta opción:

  • nav — elemento de navegación genérico
  • .main-nav — varias plataformas
  • .site-navigation — varias plataformas

Nota: Al usar el modo Reemplazar, puede aparecer un breve destello del menú original mientras Navi+ se carga. Vea I.4 a continuación para prevenir esto.

¿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.

I.3. Apuntando a dispositivos específicos

Puede controlar si el Selector CSS se aplica en móvil, escritorio, o ambos añadiendo un sufijo a su selector:

Sufijo Aplica a
(M) Solo móvil
(D) Solo escritorio
(ninguno) Tanto móvil como escritorio

Ejemplos:

  • header(D) — inserta o reemplaza solo en escritorio
  • header(M) — inserta o reemplaza solo en móvil
  • header — inserta o reemplaza en ambas plataformas

I.4. ¡Importante! Optimizar la velocidad del Mega Menu y la experiencia del usuario (modo Reemplazar)

Cuando reemplaza un menú por otro, Navi+ espera hasta que el menú antiguo se muestre y luego lo intercambia instantáneamente por el nuevo. Aunque esto sucede casi de inmediato, todavía hay un breve momento en el que aparece el menú antiguo, lo que puede confundir a los usuarios.

Con este paso, puede ocultar completamente el menú antiguo y mostrar un efecto de carga en su lugar. Esto hace que el sitio web se sienta más rápido y mejora la experiencia del usuario. Navi+ proporciona una opción simple integrada para esto en la configuración de publicación — actívela y configure el Selector CSS del elemento a ocultar, con un sufijo opcional (M) o (D) para control específico del dispositivo.

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

El código a continuación puede ser utilizado 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 inserte el código cuando se cumplan las condiciones. Este tipo de menú es adecuado para: Mega menu, Grid, etc.

<!-- Inserte el código donde aparece el menú SF-123456789. (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;
<!-- Inserte el código donde aparece el menú SF-123456789 -->

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