Oculta lo que solo sirve en la web
Banners de cookies, insignias de las tiendas, ventanas emergentes de newsletter, navegación de escritorio, la insignia "Edit with …" de la herramienta. Una regla CSS para cada uno en custom.css.
Cambios típicos solo para la app
Diseño de app
Zonas táctiles más grandes, padding de safe area para las barras fijas, una navegación inferior (o el pie de navegación nativo de WebViewGold) y ocultar los títulos de página que ya muestra la barra de la app.
Cambios de comportamiento
Reescribe los enlaces externos para que se abran en el navegador integrado, llama a successhaptic:// tras enviar formularios, oculta el checkout web para bienes digitales y muestra en su lugar el botón de IAP.
Prompt para Lovable
Pega esto en Lovable para implementar la parte de la web app. Revisa el resultado, publica y luego prueba dentro de la app WebViewGold.
Prompt para pegar en Lovable
Prepara la interfaz exclusiva de la app y la exclusiva de la web para la versión móvil nativa. 1) Añade un hook useIsNativeApp() que devuelva true cuando navigator.userAgent contenga "WebViewGold". 2) Añade el atributo data-web-only a la cabecera de marketing, al pie de página, al banner de cookies y a cualquier elemento promocional de "Descarga la app" o "Edit with", y no los renderices cuando useIsNativeApp() sea true. 3) Dentro de la app nativa, renderiza una barra de pestañas inferior fija con cuatro pestañas (Inicio, Buscar, Actividad, Perfil) usando las rutas existentes, con padding-bottom establecido en env(safe-area-inset-bottom) y 56px de altura; oculta la navegación superior en anchos móviles. 4) Evita los saltos de diseño: evalúa el hook de forma síncrona para que la decisión se tome antes del primer pintado.
WebViewGold nos ha permitido el tiempo de mercado más corto y eficiente que jamás sea posible de todas las otras plataformas de aplicaciones que hemos probado durante los últimos 5 años. No sé por qué no lo había descubierto antes, ¡pero estoy muy, muy contento de haberlo hecho. Actualmente cerca de 6000 descargas de aplicaciones tanto en iOS App Store & Google Play Store sin ningún problema!
Dos formas de hacerlo en Lovable
Elige la que encaje con tu forma de trabajar.
Opción A: custom.css / custom.js en WebViewGold
Edita los dos archivos en los proyectos de Xcode y Android Studio (o en los campos del Cloud Builder). Se inyectan en cada página. No hace falta desplegar tu web app; el cambio llega con una nueva build de la app.
Opción B: detecta la app en Lovable
Define un user agent personalizado en Config.swift / Config.java (por ejemplo, añadiendo "WebViewGold"), añade una clase al body de tu web app cuando se detecte y da estilo a las variantes
.in-appen tu hoja de estilos normal. Los cambios salen con cada publicación, sin actualizar la app.Combina ambas
Usa la clase del user agent para lo que cambia a menudo (navegación, promociones) y custom.css para limpiezas puntuales de elementos que no puedes cambiar fácilmente en la herramienta.
Verifica en condiciones de revisión
Abre la app en un iPhone y en un teléfono Android, en vertical y en horizontal, y en un iPad: sin cabecera de escritorio, sin scroll horizontal y nada oculto bajo el notch.
custom.css de partida
Ajusta los selectores al marcado de tu app de Lovable:
css
/* elementos que solo sirven en la web */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* navegación de escritorio y enlaces del pie */
header .desktop-nav, footer .link-columns { display: none !important; }
/* safe area para barras fijas */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* zonas táctiles cómodas */
button, .btn, a.nav-item { min-height: 44px; }Preguntas frecuentes
¿El CSS personalizado cambia mi web?
No. Solo se inyecta dentro de la app. Los visitantes en Safari o Chrome ven la web como siempre.
¿Puedo inyectar librerías JavaScript?
Sí, custom.js se ejecuta en cada carga de página dentro de la app. Mantenlo pequeño y defensivo: según el framework, las páginas de Lovable pueden cargarse antes o después de tu script.
¿Necesito una nueva versión en la tienda para cambiar el CSS?
Para cambios en custom.css, sí (va incluido en la app). Si quieres cambios instantáneos, usa en su lugar la detección por user agent en tu web app.
Tres formas de llevar tu app a las tiendas
El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.
Hazlo tú mismo
$109 por plataforma, pago único
La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.
Ver planes en la página principalCloud Builder
$349 por licencia, complemento de pago único
Sin Mac, sin Xcode, sin Android Studio: configura en el navegador, compilamos ambas apps en la nube y las entregamos a App Store Connect y a Play Console.
Cómo funciona el Cloud Builder Prueba la demo gratuitaFull Service
$698 por plataforma $798
Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.
Detalles del Full Service Con tecnología de
Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.