Splash screen - no login

Ask for Help
1

My app will not have user login. Anyone can use the app.

How do I create a start-up splash screen?

2

Does the user have to click on something on the splash screen for them to access the main tab(s)?

3

I would like it to work that way. Thank you!

4

I’m thinking if you have access to CSS, you can conditionally hide tabs even if your app is fully public.

  • Add a “Splash” tab.
  • Add a rich text component to it with the CSS class being “splash-tab”.
  • In all other tabs, add a rich text component with the CSS class being “not-splash-tab”.
  • Add this to your CSS in Settings > Appearance.
#page-root:has(.splash-tab) div[class*="mobile-tab-bar"] {
display: none;
}

#page-root:has(.splash-tab) nav[class*="desktop-nav-bar"] {
display: none;
}

#page-root:has(.splash-tab) ul[class*="mobile-sidemenu___StyledUl"] {
visibility: hidden;
}

#page-root:has(.not-splash-tab) button[data-testid="tab-Splash"] {
display: none;
}

#page-root:has(.not-splash-tab) button[class*="desktop-nav-bar___StyledButton"]:nth-of-type(1) {
display: none;
}

Then, in your Splash tab, add a button for the user to navigate to another tab in your app.

The way this works is when the Splash tab is opened, CSS hides all other tabs. When you move to any other tab, the CSS hides the Splash tab.

Splash tab must be positioned first amongst your tabs, and named “Splash”.