Switch Apps
This document explains the app switcher in the top-left of the BILDIT Visual Experience Engine, the difference between apps and websites, and what production, staging, and development environments mean.
The App Switcher
The switcher in the top-left allows you to change which application you are working in. When you click it, a dropdown shows:
- Apps – Mobile applications (iOS/Android)
- Add A New App – Create a new mobile app (admin only)
- Websites – Web applications (feature-gated)
- Add A New Website – Create a new website (admin only)
Selecting an item switches the active context. All Visual Experience Engine content (banners, screens, components, etc.) is scoped to the selected app or website.
Apps vs Websites
| Apps | Websites | |
|---|---|---|
| Platform | Mobile (iOS, Android, iPad) | Web (browser) |
| Content | Banners, screens, components, categories | Banners (web slots), categories |
| Display | Native app or Appetize.io preview | Embedded script on host sites |
| API | remote-banners, remote-screen | remote-webbanners |
| Placement | location (screen ID), devices | webSlots, locations (URLs) |
- Apps – Mobile apps that load banners, screen configs, and components from the Visual Experience Engine.
- Websites – Web properties where the BILDIT script injects banners into DOM slots on the host site.
Both are first-class entries in the switcher. A user may have access to multiple apps and multiple websites.
Environments: Production, Staging, Development
Each app and website has an environment that indicates its role in the deployment pipeline.
Environment Types
| Environment | Purpose | Typical Use |
|---|---|---|
| Production | Live, customer-facing | Real users, production Firebase project |
| Staging | Pre-production testing | QA, UAT, production-like data |
| Development | Early development / integration | Local work, experimental features |
How It Works
- Set at creation – When adding a new app or website, you choose Development, Staging, or Production.
- Displayed in the UI – Each item in the switcher shows an environment badge (icon + label).
- Maps to infrastructure – The app/website
idtypically maps to a project and a configuration. - Separate data – Each environment usually points to a different Firebase project, so data is isolated.
Environment Icons
The switcher uses distinct icons for each environment:
- Production – One icon style
- Staging – Another icon style
- Development – Another icon style
These make it easy to see which environment you are editing at a glance.
Summary
| Concept | Meaning |
|---|---|
| App Switcher | Dropdown to switch between apps and websites you can access |
| Apps | Mobile applications with their own banners, screens, components |
| Websites | Web properties with web banners in slots |
| Environment | Label (production/staging/development) for the deployment stage |
| Project/config | App/website id maps to a Firebase project and API config |
Takeaway: The switcher lets you change which app or website you’re editing. Each entry has an environment badge indicating production, staging, or development, and each typically connects to a separate Firebase project with its own data.