Så här gör du: Dölj webbplatselement i din app

Ibland innehåller en webbplats element som funkar i en webbläsare men som inte borde visas i appen. Vanliga exempel är banners som ber användare ladda ner appen, cookie-banners som förvirrar Apples granskare, betalningsknappar under App Review eller webbplatsnavigering som ersätts av appens meny.

Om du vill bygga in app-specifikt beteende direkt i din webbplats kan du också upptäcka om en besökare använder appen. Läs vår guide om hur du skiljer mellan webbplats- och appanvändare.

Följande avsnitt går igenom olika inställningar du kan justera i dina inställningar för "Webbplatsanpassning". Du kan öppna din apps inställningar för webbplatsanpassning här.

Dölj elementväljare (Element selectors)

Använd Dölj element-selektorer när vissa element aldrig ska visas i appen. Ange CSS-selektorer för elementen du vill dölja. Appen döljer alla matchande element när din webbplats visas i appen.

Det här passar bra för uppmaningar att ladda ner appen, duplicerad webbplatsnavigering eller andra element som är användbara på webbplatsen men onödiga i appen.

Injicera CSS

Oftast är Dölj element-selektorer att föredra eftersom de fungerar snabbare (ingen flimmer innan CSS tillämpas), men du kan också använda CSS att injicera när enkla dölj-selektorer inte räcker och du vill justera sidans stil i appen. CSS:en injiceras i den visade webbplatsen, och du behöver inte omsluta den i en style-tagg.

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

Injicera JavaScript

Använd JavaScript att injicera när det krävs logik för att dölja eller ändra element eller när du inte kan hitta en bra CSS-selektor. JavaScriptet körs en gång per sidladdning efter DOMContentLoaded-händelsen, och du behöver inte omsluta det i en script-tagg.

Här är ett exempel som använder en loop för att dölja dynamiskt inlästa sociala inloggningsknappar som Apple inte tillåter:

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 för AI-byggda webbplatser

Om din webbplats byggdes med ett AI-verktyg kan du använda det för att hjälpa dig att dölja element. Till exempel, om du behöver ett enkelt sätt att dölja alla betalningsrelaterade element i appen kan du ge den den här prompten:

Vi behöver ett enkelt sätt att dölja alla betalningsrelaterade element från webbplatsen. För att göra det, ge alla UI-element relaterade till betalningar HTML-klassen "payment". Om ett föräldraelement har payment-klassen behöver dess underordnade element inte ha klassen också eftersom de automatiskt kommer att döljas när föräldern döljs. Implementera ingen av döljlogiken, detta sker utanför webbplatsen.

Lägg sedan till CSS-selektorn .payment i dina Dölj element-selektorer så kommer allt betalningsrelaterat inte längre att visas i appen.