Intro page

👉 The Tag
Displays a custom intro screen either 1) every time the app user opens the app or 2) only the first time.
📍 Where to add the tag: A top-level app page
[intro:always] or [intro:once]
​
//Add this tag in a visual element (NOT a top-level app page) to close the intro screen.
​
[action:closeintro]
[intro:always] displays the intro every time the user opens the app.
[intro:once] displays the intro only the first time the user opens the app.
🏷️ How to add the tag
    1. Create an intro screen design.
Pro tip: use the Lottie component to easily add a Lottie animation in your intro.
    2. Add a container around the design.
    3. Paste the tag [intro:always] or [intro:once] into the layer name of the top-level app page.
    4. Paste the tag [action:closeintro] into the layer name of a visual element to close the intro screen.
    5. Make sure the Starting Frame is on your "home" app page, not the intro screen. Also make sure there is a Starting Frame.
Don't link the intro page to any screen. It's a standalone screen. The close intro Tag will automatically reveal the Starting Frame screen.
You can create an intro flow with several screens. If you do this, do not link the last page of the intro with the first page of the app, but add an [action:closeintro]  element. Check how it's done in the example design files.
    6. Import to Bravo & preview on Bravo Vision 🚀
💾 Example files
Duplicate the files below to see how to set it up!
Bravo Sample: Intro Pages
Figma
Bravo Sample - Intro Pages.xd.zip
230KB
Binary
Bravo Sample: Intro Pages.xd

Bravo Tags - Previous

Special pages

Post-login page (Onboarding)

Last modified 10mo ago

Copy link

Outline

👉 The Tag

🏷️ How to add the tag

💾 Example files