How to: Hide Website Elements Inside Your App

Sometimes a website contains elements that make sense in a browser but should not be shown inside the app. Common examples are banners asking users to download the app, cookie banners that confuse Apple reviewers, payment buttons during App Review, or website navigation that is replaced by the app's menu.

If you want to build app-specific behavior directly into your website, you can also detect whether a visitor is using the app. Read our guide about differentiating between website and app users.

The following sections discuss various settings you can adjust in your "Website Customization" settings. You can open your app's website customization settings here.

Hide Element Selectors

Use Hide Element Selectors when specific elements should never be shown inside the app. Enter CSS selectors for the elements you want to hide. The app will hide all matching elements when your website is displayed inside the app.

This is a good fit for app download prompts, duplicate website navigation, or other elements that are useful on the website but unnecessary in the app.

CSS to Inject

Typically the Hide Element Selectors are preferable because they work more quickly (no flicker before CSS is applied), but you can also use CSS to Inject when simple hiding selectors are not enough and you want to adjust the page style inside the app. The CSS is injected into the displayed website, and you do not need to wrap it in a style tag.

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

JavaScript to Inject

Use JavaScript to Inject when hiding or changing elements requires logic or you can't find a good CSS selector. The JavaScript runs once per page load after the DOMContentLoaded event, and you do not need to wrap it in a script tag.

Here's an example that uses a loop to hide dynamically loaded social login buttons that Apple doesn't allow:

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 for AI-Built Websites

If your website was built with an AI tool, you can use that to help you with hiding elements. For example, if you need an easy way to hide all payment-related elements in the app, you can give it this prompt:

We need an easy way to hide all payment-related elements from the website. To do so, give all UI elements related to payments the HTML class "payment". If a parent element has the payment class, its child elements don't need the class too since they will be hidden automatically when the parent element gets hidden. Don't implement any of the hiding logic, this happens outside of the website.

Afterwards, add the CSS selector .payment to your Hide Element Selectors and everything payment related won't show up in the app anymore.