# Publish to the Web

> Get your web app URL in minutes, activate PWA options, and customize every detail—from custom domains to SEO.

https://docs.pandasuite.com/essentials/web-publishing/publish-to-the-web/

**Publishing in web format is the fastest way to make your PandaSuite project accessible from any browser and any device.**

## Prerequisites

| Step                                                         | Why?                                                     | Resources                                                                                                                     |
| ------------------------------------------------------------ | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Have an active subscription plan (**Web**, **Single**, etc.) | Without an active plan, the web app cannot be activated. | [Compare Plans](https://docs.pandasuite.com/account/subscription/which-plan-for-your-project/)                                |
| Link one or more projects to the application                 | An empty application has no content to publish.          | [Move Your Project to Production](https://docs.pandasuite.com/essentials/content-management/move-your-project-to-production/) |

## Generate the URL of the Web App

1. Open your [PandaSuite Dashboard](https://pandasuite.com/dashboard/publish).
2. Select the relevant application.
3. In **Platforms**, on the **Web** card, click **Activate** next to **Web app**.
4. Wait a few seconds: a URL like\
   `https://app.pandasuite.com/AbCdEfGh` is generated.

[Image: Platforms section of an app in the dashboard: on the Web card, the generated URL and the Configure web settings link are framed]

> **Success: Good news**
>
> This URL works immediately on desktop, mobile, and tablet without
> installation.

## Customize the Loading Screen

By default, a PandaSuite logo appears during loading.

You can customize the loading screen with several elements:

1. **The icon** in the center of the screen
2. **The loader** indicating loading progress
3. **The background color**

[Image: Web app loading screen and its three customizable elements: 1 the icon, 2 the loader, 3 the background color]

To replace the icon, add a logo to your application.

You can also do this from:

- Click **Settings** on your app page, then open the **Display** tab.
- Upload your **Icon** (1024 × 1024 px recommended).
- In **Appearance**, customize the **Primary color** (background) and/or the **Secondary color** (loader).

[Image: Display tab of the app settings: the Icon is framed, and so are the Primary color and Secondary color of the Appearance section]

## Configure Web Settings

All settings can be found under **Settings** ▸ **Web Settings**.

- **[Service workers](https://docs.pandasuite.com/essentials/web-publishing/activate-the-service-workers/)**: turn your web app into a **[Progressive Web App](https://pandasuite.com/blog/progressive-web-app/)** with offline functionality, and add to home screen option.

> **Warning: PWA Compatibility**
>
> Service workers are not supported by all browsers (e.g., Internet Explorer).
> Check the [compatibility
> table](https://docs.pandasuite.com/essentials/web-publishing/activate-the-service-workers/#browser-compatibility)
> before activating it.

- **Full Loading**: waits for all resources to load before opening the app.
- **Security Headers / CSP**: adds Content-Security-Policy, X-Frame-Options, etc.
- **Device Skin**: frames the interface within a fictitious smartphone/tablet.
- **PandaSuite Branding**: shows or hides the PandaSuite logo.
- **[SEO](https://docs.pandasuite.com/essentials/web-publishing/seo/)** (title, description, image): optimizes search engine indexing.
- **Cookies consent**: displays a ready-to-use GDPR banner.
- **Custom code (`<head>` / `<body>`)**: inject scripts, pixels, or stylesheets.

## Connect a Custom Domain

A dedicated domain name reinforces your identity and reassures your visitors.\
Here's how to do it:

1. In **Settings** ▸ **Hosting**, go to **Custom Domain**.
2. With your DNS host, create the **CNAME entry → custom.pandasuite.com** for your domain or subdomain (`app.your-domain.com`), then wait for it to propagate.
3. Enter the domain or subdomain, then click **Validate Domain**. PandaSuite first checks the CNAME record: if it is not visible yet, wait and try again.
4. PandaSuite automatically provisions a Let’s Encrypt HTTPS certificate.

For EV or wildcard certificates, follow the "Custom Certificates" section of the documentation.

👉 Full documentation: [Customize the Domain Name](https://docs.pandasuite.com/essentials/web-publishing/custom-domain/)

## Control access with the hosting status

By default, the web app is open to anyone who has its link. To change this, go to **Settings** ▸ **Hosting**. In **Status**, click the button that shows the current status, then choose another one:

- **Enabled**: available to everyone with the links.
- **Disabled**: access is blocked and your links no longer work. Confirm in the **Disable Hosting** window.
- **Redirection**: visitors are sent to another address. Enter it in **Url**, then click **Save Changes**.
- **Protected**: access is restricted to dedicated access links. When you switch from **Enabled**, confirm in the **Change Hosting Status** window. Then click **Create links**, in the **Protected access** box, to [create the links that give access to the web app](https://docs.pandasuite.com/essentials/web-publishing/links/).

[Image: Status section of the Hosting tab: the button showing the Enabled status is framed, above the legend of the statuses and the Protected access box]

The status applies to all your hosting links: the URL of the web app and the download links of your native files.

## Pin the web viewer version

The web viewer is the engine that runs your web app, and PandaSuite updates it regularly. To keep your app on a given version, for example while you test an update:

1. On your app page, in **Services**, click **Security**.
2. In **Pin Web Viewer Version**, turn on the switch.
3. In **Version**, choose the version.
4. Click **Save Changes**.

[Image: Pin Web Viewer Version section: the switch, turned on, and the Version list are framed]

To follow the updates again, turn the switch off and click **Save Changes**.

## Alternative: Export a web package

If you prefer to host the application yourself or integrate it into a specific environment:

1. In **Platforms**, on the **Web** card, click **Export ZIP**. If a package was already exported, open its options (**⋮**) and click **Generate new\...**
2. Choose the **Project**, the **Type**, and the **Package format**.
3. An email will notify you when the archive is ready for download.

Choose **Standard ZIP** for self-hosting, **SCORM package** for SCORM-compatible LMS distribution, or **CMI5 package** for CMI5-compatible LMS distribution.
Detailed guide: [Export a web package](https://docs.pandasuite.com/essentials/web-publishing/export-a-zip-file/)