# Install as App (PWA)

Let users install your AI chatbot as an app on their phone or desktop for quick access.


Your Chipp AI chatbot can be installed as a Progressive Web App (PWA), giving users an app-like experience without going through app stores. Users get a home screen icon and a full-screen experience.

## What is a PWA?

A Progressive Web App provides:

| Feature | Description |
|---------|-------------|
| **Home screen icon** | Quick launch like a native app |
| **Full screen** | No browser chrome or URL bar |
| **Splash screen** | Branded loading screen on launch |
| **Fast loading** | Cached for instant startup |
| **No app store** | Install directly from the browser |

## Setting Up PWA

<Steps>
  <Step title="1">
    <strong>Go to Share Page</strong>

    Open your app and click **Share** in the navigation.
  </Step>

  <Step title="2">
    <strong>Find Deploy as PWA</strong>

    Look for the **Deploy as PWA** card and click **Add Deployment**.
  </Step>

  <Step title="3">
    <strong>View Your App URL</strong>

    The dialog shows your app URL that users will visit to install the PWA. You can copy this URL to share with users.
  </Step>

  <Step title="4">
    <strong>Generate Splash Screens</strong>

    Click **Refresh** in the Splash Screen section to generate branded splash screens. These appear when users launch your PWA from their home screen.
  </Step>
</Steps>

## User Installation Instructions

Share these instructions with your users:

### On iPhone (iOS)

<Steps>
  <Step title="1">
    Open your app URL in **Safari**
  </Step>
  <Step title="2">
    Tap the **Share** button (square with arrow)
  </Step>
  <Step title="3">
    Scroll down and tap **Add to Home Screen**
  </Step>
  <Step title="4">
    Name your app and tap **Add**
  </Step>
</Steps>

### On Android

<Steps>
  <Step title="1">
    Open your app URL in **Chrome**
  </Step>
  <Step title="2">
    Tap the **menu** (three dots)
  </Step>
  <Step title="3">
    Tap **Add to Home screen** or **Install app**
  </Step>
  <Step title="4">
    Follow the prompts to install
  </Step>
</Steps>

### On Desktop (Chrome)

<Steps>
  <Step title="1">
    Open your app URL in Chrome
  </Step>
  <Step title="2">
    Click the **install icon** in the address bar (or menu > Install)
  </Step>
  <Step title="3">
    Click **Install** in the prompt
  </Step>
</Steps>

## PWA Customization

Your PWA automatically uses your app's branding:

- **App icon**: Set in Build > Customize
- **App name**: Your app's name
- **Brand color**: Your app's primary color
- **Splash screen**: Generated from your logo and brand color

To update your PWA appearance:

1. Go to **Build** > **Customize**
2. Update your logo and brand color
3. Go to **Share** > **Deploy as PWA**
4. Click **Refresh** to regenerate splash screens

## Updates

Changes to your app are automatically deployed:

- App name, logo, and brand colors update automatically
- Content and settings sync in real-time
- Users see updates when they reopen the PWA

If you need to force an immediate update, use the **Refresh Now** button in the PWA deployment dialog to trigger a cache refresh.

## Troubleshooting

### Install Option Not Appearing

PWA install requires:
1. **HTTPS**: Your app must be served over HTTPS (all Chipp apps use HTTPS)
2. **Safari on iOS**: Other browsers don't support PWA install on iOS
3. **Chrome on Android**: Use Chrome for the best experience

### Splash Screen Not Showing

1. Make sure you've generated splash screens in the PWA dialog
2. Your app needs a logo set for splash screens to generate
3. Click **Refresh** to regenerate after changing your logo

### App Not Updating

PWAs cache content for speed. To see updates:
1. Close the app completely
2. Reopen - updates load automatically
3. Or use **Refresh Now** in the PWA dialog to trigger immediate updates