Masquer les éléments propres au site
Bandeaux cookies, badges des stores, pop-ups de newsletter, navigation desktop, le badge « Edit with … » de l'outil. Une règle CSS pour chacun dans custom.css.
Les changements typiques réservés à l'app
Une mise en page d'app
Des zones tactiles plus grandes, des marges de safe area pour les barres fixes, une navigation en bas d'écran (ou le pied de navigation natif de WebViewGold), des titres de page masqués quand la barre de l'app les affiche déjà.
Changer le comportement
Réécrivez les liens externes pour qu'ils s'ouvrent dans le navigateur intégré, appelez successhaptic:// après l'envoi d'un formulaire, masquez le paiement web pour les biens numériques et affichez à la place le bouton d'achat intégré.
Prompt pour Bolt
Collez ceci dans Bolt pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Prompt à coller dans Bolt
Ajoutez une présentation propre à l'app pour le build mobile natif. Créez src/lib/native.ts avec isNativeApp(), qui renvoie true quand navigator.userAgent contient "WebViewGold" et n'est évaluée qu'une fois au démarrage. Marquez le header marketing, le footer, le bandeau cookie, la pop-up newsletter et tout élément « Built with » ou « Téléchargez notre app » avec data-web-only, et ne les affichez pas quand isNativeApp() est true. Dans l'app native, affichez une tab bar fixe en bas (Accueil, Explorer, Enregistrés, Compte) avec padding-bottom: env(safe-area-inset-bottom), des icônes d'état actif et aucune navigation en haut. Veillez à ce que le contenu des pages ait assez de padding en bas pour que rien ne soit caché derrière la barre. Ne changez rien pour les visiteurs qui utilisent un navigateur classique.
Avec une bonne version optimisée de votre application Web, vous pouvez avoir une superbe application mobile en quelques minutes. De plus, le service client est très agréable et très utile! Je ne peux que recommander WebViewGold :-)
Deux façons de procéder avec Bolt
Choisissez celle qui correspond à votre façon de travailler.
Option A : custom.css / custom.js dans WebViewGold
Modifiez les deux fichiers dans les projets Xcode et Android Studio (ou les champs du Cloud Builder). Ils sont injectés dans chaque page. Aucun déploiement de votre app web n'est nécessaire ; c'est un nouveau build de l'app qui livre le changement.
Option B : détecter l'app dans Bolt
Définissez un user agent personnalisé dans Config.swift / Config.java (par exemple en ajoutant « WebViewGold »), ajoutez une classe sur le body de votre app web quand il est détecté, puis stylez les variantes
.in-appdans votre feuille de style habituelle. Les changements partent avec chaque publication, sans mise à jour de l'app.Combinez les deux
Utilisez la classe basée sur le user agent pour ce qui change souvent (navigation, promotions) et custom.css pour les nettoyages ponctuels d'éléments difficiles à modifier dans l'outil.
Vérifiez dans les conditions de la validation
Ouvrez l'app sur un iPhone et sur un téléphone Android, en portrait et en paysage, ainsi que sur un iPad : pas d'en-tête desktop, pas de défilement horizontal, rien sous l'encoche.
Un custom.css de départ
Adaptez les sélecteurs au balisage de Bolt :
css
/* éléments propres au site web */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* navigation desktop et liens du pied de page */
header .desktop-nav, footer .link-columns { display: none !important; }
/* safe area pour les barres fixes */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* zones tactiles confortables */
button, .btn, a.nav-item { min-height: 44px; }Questions fréquentes
Le CSS personnalisé modifie-t-il mon site web ?
Non. Il n'est injecté que dans l'app. Les visiteurs dans Safari ou Chrome voient le site comme avant.
Puis-je injecter des bibliothèques JavaScript ?
Oui, custom.js s'exécute à chaque chargement de page dans l'app. Gardez-le léger et défensif : selon le framework, les pages de votre app peuvent se charger avant ou après votre script.
Faut-il publier une nouvelle version sur les stores pour modifier le CSS ?
Pour les changements dans custom.css, oui (le fichier est livré avec l'app). Si vous voulez des changements instantanés, utilisez plutôt la détection du user agent dans votre app web.
Trois façons de mettre votre app dans les stores
Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.
Faites-le vous-même
$109 par plateforme, paiement unique
La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.
Voir les offres sur la page principaleCloud Builder
$349 par licence, extension en paiement unique
Ni Mac, ni Xcode, ni Android Studio : configurez dans le navigateur, nous compilons les deux apps dans le cloud et les transmettons à App Store Connect et à la Play Console.
Comment fonctionne le Cloud Builder Essayer la démo gratuiteFull Service
$698 par plateforme $798
Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.
Détails du Full Service Propulsé par
Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.