Website-Elemente ausblenden
Cookie-Banner, Store-Badges, Newsletter-Pop-ups, Desktop-Navigation, das „Edit with …“-Badge des Builders. Je eine CSS-Regel in custom.css.
Typische Änderungen nur für die App
App-typisches Layout
Größere Touch-Flächen, Safe-Area-Abstände für fixierte Leisten, eine Bottom-Navigation (oder die native Navigationsleiste von WebViewGold), ausgeblendete Seitentitel, die die App-Leiste schon zeigt.
Verhalten ändern
Externe Links im In-App-Browser öffnen, nach dem Absenden von Formularen successhaptic:// aufrufen, den Web-Checkout für digitale Güter ausblenden und stattdessen den IAP-Button zeigen.
Prompt für Lovable
Füge das in Lovable ein, um die Web-App-Seite umzusetzen. Prüfe das Ergebnis, veröffentliche und teste dann in der WebViewGold-App.
Prompt zum Einfügen in Lovable
Bereite für die native mobile Version eine Oberfläche nur für die App und eine nur für das Web vor. 1) Füge einen Hook useIsNativeApp() hinzu, der true zurückgibt, wenn navigator.userAgent "WebViewGold" enthält. 2) Füge dem Marketing-Header, dem Footer, dem Cookie-Banner und allen Werbeelementen wie „App herunterladen“ oder „Edit with“ das Attribut data-web-only hinzu und rendere sie nicht, wenn useIsNativeApp() true ist. 3) Rendere in der nativen App eine fixierte Tab-Leiste unten mit vier Tabs (Start, Suche, Aktivität, Profil), die die bestehenden Routen nutzt, mit padding-bottom: env(safe-area-inset-bottom) und 56px Höhe; blende die obere Navigation bei mobilen Breiten aus. 4) Vermeide Layout-Sprünge: Werte den Hook synchron aus, damit die Entscheidung vor dem ersten Paint fällt.
WebViewGold hat uns die kürzeste und effizienteste Time-to-Market ermöglicht, die jemals möglich war, verglichen mit allen anderen App-Plattformen, die wir in den letzten 5 Jahren ausprobiert haben. Ich weiß nicht, warum ich euch nicht schon früher entdeckt habe, aber ich bin wirklich, wirklich froh, dass ich es getan habe. Wir nähern uns derzeit fast 6000 App-Downloads im iOS App Store & Google Play Store ohne Probleme!
Zwei Wege für Lovable
Nimm den, der zu deiner Arbeitsweise passt.
Option A: custom.css / custom.js in WebViewGold
Bearbeite die beiden Dateien in den Projekten für Xcode und Android Studio (oder in den Feldern des Cloud Builders). Sie werden in jede Seite injiziert. Kein Deploy deiner Web-App nötig; ein neuer App-Build liefert die Änderung aus.
Option B: die App im Web-Code erkennen
Setze in Config.swift / Config.java einen eigenen User Agent (zum Beispiel mit angehängtem „WebViewGold“), ergänze in deiner Web-App eine Body-Klasse, sobald er erkannt wird, und gestalte
.in-app-Varianten in deinem normalen Stylesheet. Änderungen gehen mit jedem Publish live, ohne App-Update.Beides kombinieren
Nutze die User-Agent-Klasse für Dinge, die sich oft ändern (Navigation, Aktionen), und custom.css für einmalige Aufräumarbeiten an Elementen, die du im Builder nicht so leicht ändern kannst.
Unter Review-Bedingungen prüfen
Öffne die App auf einem iPhone und einem Android-Smartphone, im Hoch- und Querformat, und auf einem iPad: kein Desktop-Header, kein horizontales Scrollen, nichts unter der Notch.
custom.css zum Start
Pass die Selektoren an das Markup deiner Lovable-App an:
css
/* Elemente, die nur auf die Website gehören */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* Desktop-Navigation und Footer-Links */
header .desktop-nav, footer .link-columns { display: none !important; }
/* Safe Area für fixierte Leisten */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* bequeme Touch-Flächen */
button, .btn, a.nav-item { min-height: 44px; }Häufig gestellte Fragen
Ändert eigenes CSS meine Website?
Nein. Es wird nur innerhalb der App injiziert. Besucher in Safari oder Chrome sehen die Seite wie bisher.
Kann ich JavaScript-Bibliotheken injizieren?
Ja, custom.js läuft bei jedem Seitenaufruf in der App. Halte es klein und defensiv: Seiten deiner Web-App können je nach Framework vor oder nach deinem Skript fertig geladen sein.
Brauche ich für CSS-Änderungen eine neue Store-Version?
Für Änderungen in custom.css ja (die Datei wird mit der App ausgeliefert). Wenn du Änderungen sofort live haben willst, nutze stattdessen die User-Agent-Erkennung in deiner Web-App.
Drei Wege, deine App in die Stores zu bringen
Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.
Selbst machen
$109 pro Plattform, einmalig
Die WebViewGold-Lizenz: ein fertiges Xcode- oder Android-Studio-Projekt. URL einfügen, Name und Icon setzen, Features einschalten, bauen und einreichen. Kostenlose Updates für immer.
Pakete auf der Hauptseite ansehenCloud Builder
$349 pro Lizenz, einmaliges Add-on
Kein Mac, kein Xcode, kein Android Studio: Du konfigurierst im Browser, wir bauen beide Apps in der Cloud und übergeben sie an App Store Connect und die Play Console.
So funktioniert der Cloud Builder Kostenlose Demo ausprobierenFull Service
$698 pro Plattform $798
Schick uns deine URL und dein Icon. Unser Team konfiguriert, baut und liefert deine App innerhalb von 72 Stunden, White-Label, inklusive Quellprojekten. Beide Plattformen für $1,158.
Full-Service-Details Powered by
Winter-Sale-Preise gültig bis 31. Dezember 2026.