bubbleHacks
Minimalistic App Landing Documentation

Minimalistic App Landing Documentation

Introduction

Need a lightweight and minimalistic landing page for your mobile app or just want to test a new mobile app idea? The Minimalistic App Landing Template is the perfect template to bring your ideas to life and measure your traffic and user behavior.

→ Q&A in the Bubble forum: https://forum.bubble.io/t/new-template-minimalistic-app-landing-page/147034

Features

  • Customized in less than 10 minutes
  • Great minimalistic design
  • Preconfigured tracking of pageviews, clicks, etc.
  • Metrics dashboard to measure your download funnel
  • Automatic dark mode based on user's device settings
  • Email waitlist signup
  • Contact form

Setup Instructions (all done in the Bubble editor)

  1. Edit the app icon, title and tag line
    2. image
  2. Remove the Darkmode and Metrics button from the Index page - these are for demo purposes only. You don't want your page visitors to see them.
    3. image
  3. Replace the all 4 app screen shots with your own
    • Go to Data → Option Sets → Screenhots 1-4 → Modify attributes → click on the image to upload yours → Save.
      • image
    • We recommend Canva to create beautiful screenshots. The template is optimized for 200x355px screenshots. If you use a different aspect ratio, you need to change the size of the group 'Group Screenshot (200x355)' in the RepeatingGroup optScreenshots.
    • You can also add screenshots or delete existing ones by adding or deleting options:
      • image
  4. Edit description text on the Index page
  5. Go the privacy page and add your app's privacy policy text
    6. image
  6. ‼️ Adjust the email address for the contact from, so you get email when a visitor leaves a message in the contact form
    7. image
  7. Adjust your SEO settings and meta data:
    1. Select the index and adjust the page title and image
      2. image
    2. Go to Settings → SEO / Metatags and edit your information
      3. image
  8. Optional: 'Link' App store buttons to your App in the workflow tab. Per default, clicking one of the buttons will show the 'Sign up for the wait list' popup. If you already have an app, adjust the workflow to link to it.
    9. image
    image
    image

Further information

Pages

The template consist of 3 main pages:

  1. index: This is the main page where you present your app
  2. privacy: this is an empty placeholder page for your privacy policy
  3. Dashboard: this is where you see your user metrics (pageviews, clicks, etc.)

404 and reset_pw are additional system pages.

Data

The app has the following data types. These are used for to calculate the user metrics shown in the dashboard page of the app:

  • pageViews: A new entry is generated when a user loads the page
  • uniqueVisitors: A new entry is generated when a new user loads the page for the first time
  • clicksIos: A new entry is generated when a user clicks the 'Download on the App Store' button
  • clicksAndroid: A new entry is generated when a user clicks the 'Get it on Google Play' button
  • clicksPwa: A new entry is generated when a user clicks the 'Lanch as PWA' button
  • waitlistEmailAddress: A new entry is generated when a user submits their email address after clicking on one of the download buttons
  • User: This is a bubble default data type

Dark mode

  • The app automatically detects if a user is viewing it in dark mode (i.e. the current settings on their device) and goes into dark mode automatically.
  • The button 'View in dark mode' overwrites this setting for the current session using the custom states 'showInDarkMode' (Index) and 'blockThemeOverwrite' (Index)

Need help?

Happy to answer your questions here: https://forum.bubble.io/t/new-template-new-mobile-app-starter-pack/87797

You might also like

TwitterYouTube

Sign up to newsletter

2022 bubbleHacks