Managing Apps

This document explains the app switcher in the top-left of the BILDIT Visual Experience Engine, how to add an app or website after onboarding, how to use both an app and a website, the difference between apps and websites, and what production, staging, and development environments mean.

The same switcher is documented for Web in Manage Websites.

The App Switcher

The switcher in the top-left allows you to change which application or website you are working in. When you click it, a dropdown shows:

1. Apps – Mobile applications (iOS/Android)
2. Add A New App – Create a new mobile app (admin or superuser only)
3. Websites – Web applications (feature-gated)
4. Add A New Website – Create a new website (admin or superuser only)

Selecting an item switches the active context. All Visual Experience Engine content (scheduled content, specifications, components, etc.) is scoped to the selected app or website.

---

Add an app or website after onboarding

Onboarding typically creates your first app (and, if Web is enabled, your first website). You can add more later from the same switcher. You do not need to re-run onboarding.

Who can add: Admin or Superuser. Other roles can switch among apps and websites they already have access to, but they will not see Add A New App or Add A New Website.

Add a new app

1. Click the app / website icon in the top-left of the Visual Experience Engine.
2. Click Add A New App.
3. Fill in the modal:
   • ID – Unique ID for the app (for example fashionOne).
   • App Name – Display name (for example BILDIT App).
   • App Type – Category such as Ecommerce, Grocery, Restaurant, or ECommerce AppClip.
   • Environment – Development, Staging, or Production.
4. Complete remaining required fields in the modal (for example version and store / preview settings as shown).
5. Confirm. The new app appears in the switcher. Select it to start managing its scheduled content, specifications, and components.

Add a new website

Websites appear in the switcher only when the Web feature is enabled for your org.

1. Click the app / website icon in the top-left.
2. Scroll to the Websites list.
3. Click Add A New Website.
4. Fill in the modal:
   • Verify the website URL when prompted.
   • Website ID – Unique ID (for example fashionOne).
   • Website Name – Display name (for example Fashion One).
   • Website Category – Same category list as apps.
   • Environment – Development, Staging, or Production.
5. Confirm. The new website appears under Websites. Select it to manage web scheduled content and slots.

For how to render that website’s scheduled content on a Next.js site, see Next.js Integration.

---

Using both an app and a website

One BILDIT instance can include multiple mobile apps and multiple websites at the same time. They are separate entries in the same switcher.

• App – Native / Appetize content: scheduled content, specifications, components, categories.
• Website – Host site with the BILDIT script or Next.js SDK: web scheduled content in slots.

To work in both:

1. Keep (or add) at least one app and one website.
2. Use the top-left switcher to select the app when you are editing mobile experience.
3. Use the same switcher to select the website when you are editing web experience.
4. Invite teammates with Add a User and assign the apps (and websites) they should access.

Content does not copy automatically between an app and a website. Duplicate or recreate scheduled content in the other context if both platforms need it.

---

Apps vs Websites

	Apps	Websites
Platform	Mobile (iOS, Android, iPad)	Web (browser)
Content	Scheduled Content, specifications, components, categories	Scheduled Content (web slots), categories
Display	Native app or Appetize.io preview	Embedded script on host sites
API	remote-banners, remote-screen	remote-webbanners
Placement	location (specification ID), devices	webSlots, locations (URLs)

• Apps – Mobile apps that load scheduled content, specification configs, and components from the Visual Experience Engine.
• Websites – Web properties where the BILDIT script injects scheduled content 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

1. Set at creation – When adding a new app or website, you choose Development, Staging, or Production.
2. Displayed in the UI – Each item in the switcher shows an environment badge (icon + label).
3. Maps to infrastructure – The app/website id typically maps to a project and a configuration.
4. 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, and to add new ones (admin/superuser)
Apps	Mobile applications with their own scheduled content, specifications, components
Websites	Web properties with web scheduled content 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: After onboarding, add more apps or websites from the top-left switcher. You can keep both an app and a website in the same instance and switch between them. Each entry has an environment badge (production, staging, or development) and typically connects to a separate Firebase project with its own data.