How to: Website-elementen verbergen in je app

Soms bevat een website elementen die logisch zijn in een browser, maar niet in de app getoond moeten worden. Veelvoorkomende voorbeelden zijn banners die gebruikers vragen de app te downloaden, cookiebanners die Apple-reviewers in de war brengen, betaalbuttons tijdens App Review, of websitenavigatie die wordt vervangen door het menu van de app.

Als je app-specifiek gedrag direct in je website wilt bouwen, kun je ook detecteren of een bezoeker de app gebruikt. Lees onze gids over het onderscheid tussen website- en appgebruikers.

De volgende secties bespreken verschillende instellingen die je kunt aanpassen in je instellingen voor "Website-aanpassing". Je kunt de instellingen voor website-aanpassing van je app hier openen.

Element-selectors verbergen

Gebruik Hide Element Selectors wanneer specifieke elementen nooit in de app getoond mogen worden. Voer CSS-selectors in voor de elementen die je wilt verbergen. De app verbergt alle overeenkomende elementen wanneer je website in de app wordt weergegeven.

Dit is ideaal voor app-downloadprompts, dubbele websitenavigatie of andere elementen die nuttig zijn op de website maar overbodig in de app.

Te injecteren CSS

Meestal hebben Hide Element Selectors de voorkeur omdat ze sneller werken (geen geflikker voordat CSS is toegepast), maar je kunt ook CSS to Inject gebruiken wanneer simpele verberg-selectors niet genoeg zijn en je de paginastijl in de app wilt aanpassen. De CSS wordt in de weergegeven website geïnjecteerd en je hoeft het niet in een style-tag te zetten.

.website-only-banner {
    display: none !important;
}

Te injecteren JavaScript

Gebruik JavaScript to Inject wanneer het verbergen of aanpassen van elementen logica vereist of wanneer je geen goede CSS-selector kunt vinden. De JavaScript draait één keer per paginalaadbeurt na het DOMContentLoaded-event, en je hoeft het niet in een script-tag te zetten.

Hier is een voorbeeld dat een loop gebruikt om dynamisch geladen social-loginbuttons te verbergen die Apple niet toestaat:

setInterval(() => {
  if (window.location.href.toLowerCase().includes("login")) {
    document.querySelectorAll("button").forEach(btn => {
      const text = btn.textContent.toLowerCase().trim();
      if (
        text.includes("sign in with google") ||
        text.includes("continue with google") ||
        text.includes("sign in with microsoft") ||
        text.includes("continue with microsoft") ||
        text.includes("sign in with facebook") ||
        text.includes("continue with facebook")
      ) {
        btn.style.display = "none";
      }
    });
  }
}, 200);

Prompt voor AI-gebouwde websites

Als je website is gebouwd met een AI-tool, kun je die gebruiken om je te helpen met het verbergen van elementen. Als je bijvoorbeeld een makkelijke manier nodig hebt om alle betaalgerelateerde elementen in de app te verbergen, kun je deze prompt geven:

We hebben een makkelijke manier nodig om alle betaalgerelateerde elementen van de website te verbergen. Geef daarom alle UI-elementen die met betalingen te maken hebben de HTML-class "payment". Als een parent-element de payment-class heeft, hoeven de child-elementen de class niet ook te hebben, omdat ze automatisch verborgen worden wanneer het parent-element verborgen wordt. Implementeer geen verberglogica; dat gebeurt buiten de website.

Voeg daarna de CSS-selector .payment toe aan je Hide Element Selectors en alles wat met betalingen te maken heeft wordt niet meer in de app getoond.