> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/the-designer/project-settings.md).

# Project Settings

The Project Settings modal is the place where project-level preferences are configured and saved. It includes options relating to publishing, performance, customization, and PWAs. 

## Publish Options

The Publish options panel contains all publish properties that were originally located in the options available when publishing your project from the Preview mode.

To access the publish settings, select **Publish options** from the project settings menu.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F3AZ25pvmd4HSh6QLJSmd%2FProjectSettings.png?alt=media&amp;token=556a6bfc-db4f-4337-866f-d04d9456b35a" alt="" width="557"><figcaption></figcaption></figure>

#### Project Name

The project name is how the project will be identified and labeled in both the Project Manager and when viewed in the browser. Any value entered into this area will be carried across to the publishing modal, accessed in Preview mode.

### Project Formatting

#### Background

When viewed in the browser, the background color selected here will color the rest of the webpage that is not the project frame. This can be selected from the color picker that shows when selecting the colored square, or by entering the desired hex code within the input field.

You can preview how this will look on the webpage within the small display to the right of the properties.

#### Position

A radio option to decide where to position the project frame on the webpage. The options available are '**Top middle**' and '**Top left**'.

You can preview how this will look on the webpage within the small display to the right of the properties.

#### Scaling

A dropdown option that will determine how the project scales to the webpage.&#x20;

The default selection, '**None**' will apply no scaling to the project, and will display as the pixel width and height determined by the canvas.&#x20;

Selecting '**Fit to width**' will scale the project frame, expanding the width of the project to match that of the browser width.&#x20;

Selecting '**Fit to Window**' will scale the project to always fit within the confines of the browser, applying spacing to either the top/bottom or left/right sides of the project, whichever is greater.

### Loading the project

#### Loading indicator

With this radio option, there is the option to enable or disable the **Loading Indicato**r for the project as it generates in the browser. By default, this is set to '**On**'.

#### Indicator Color

With functionality similar to the background color, the Indicator color can be set using the color picker or by entering a hex color code into the input field.

The spinner styling can be previewed in the small display to the right of the properties.

### Security and Accessibility

#### Expiry Date

With each published project, an **Expiry Date** can be set so that the project will become unavailable after a certain amount of time. Once the date has been met, or surpassed, the project shall display the "Sorry, this project is no longer available" message on the webpage.

#### Password Protect

A project can be password protected by selecting and checking the '**Password Protect**' option. Once selected, an input will display where the selected password can be entered.&#x20;

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F2QK5i70MiSJJFTrfU58g%2FPasswordProtect.png?alt=media&amp;token=8a9325b1-c689-452c-8995-2f10bc9d1c92" alt=""><figcaption><p>The passowrd can be set and reviewed by selecting the 'eye' icon at the end of the input field.</p></figcaption></figure>

## **Advanced**

The Advanced panel provides additional options for fine-tuning the performance of your project along with some other advanced settings.

To access the advanced project settings select **Advanced** from the project settings menu.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FKWFGaXmKVg9crGwmB72D%2Fimage.png?alt=media&amp;token=983febce-e97e-4517-9b9e-22d0348250e4" alt="" width="563"><figcaption></figcaption></figure>

### Changing the default load behavior

#### Load hidden items on demand

By default, the option to '**Load hidden items on demand**' is enabled. This ensures the published project loads in the browser as quickly as possible with components only loading as they become visible (and therefore active).

Disabling this option may increase the initial load time. It will load/render all components (including hidden ones). The setting does not impact connectors or functions, it only relates to dynamic visibility.

#### Show spinner while items load

Enabling '**Show spinner while items load**' will display a loading spinner in the pace of hidden content while it is loading.&#x20;

### Saving a copy of the .sqrl file with the published version

Tick the option to '**store a copy of the SQRL file in the cloud**' if you want to save a copy of the .sqrl file with the published project. This will enable you to download the .sqrl used to publish the project from the project manager at a later date.

### Google Tag Manager

Optionally add a GTM container ID to include Google Tag Manager code and load tags that have been configured in GTM in your published app.

#### Your tags, your responsibility

When you add a GTM container ID to a Project, your container is loaded in the viewer's browser each time the Live Project runs, and any tags you have configured in your own Google Tag Manager account fire there.

Squirrel365 has no visibility of, or control over, the contents of your container. We don't see which tags you've added, what they collect, or where that data is sent — and data collected by your tags travels directly from the viewer's browser to the tag provider, it doesn't pass through Squirrel365.

That makes you, not Squirrel365, the data controller for anything your tags collect. Before publishing a Project with a container ID, make sure that:

* **you're entitled to use the container** — and, if you're building the Project for a client, that they've agreed to the tags you're adding;
* **viewers are told about the tracking** — through a privacy and cookie notice that covers the Project itself, not just your main website;
* **non-essential tags don't fire until the viewer consents** — analytics, advertising, remarketing and session-recording tags all need prior consent in the UK and EU. Use Google's consent mode or a consent management platform, and trigger tags on the consent signal rather than on page load;
* **viewers can withdraw consent** as easily as they gave it;
* **you have a lawful basis** for what you do with the data afterwards, and you can respond to viewers who ask about it;
* **you've considered where the data goes**, including any transfer outside the UK or EEA by the tag provider.

Squirrel365's own [Privacy Policy](https://squirrel365.io/privacy-policy/) and [Cookie Policy](https://www.squirrel365.io/cookie-policy) cover your use of squirrel365.io and the Designer. They don't cover tags you add to your own Projects — your own notices apply to those.

## **Custom Options**

{% hint style="info" %}
**Who can use this feature?**

Users on a **Builder** plan

For more details, see our [**pricing comparison matrix**](https://squirrel365.io/pricing/).
{% endhint %}

{% hint style="warning" %}
Custom CSS and JavaScript code are **not validated** and may cause issues with the published app.
{% endhint %}

Select **Custom options** from the project settings menu to specify custom CSS and custom JavaScript for your project.

### **Style (CSS)**

The **Style** tab contains a code editor where you can create **custom css** classes for use in your projects.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FhyhewZQhgKmeZugUYEaG%2Fimage.png?alt=media&amp;token=c9b27498-ce15-4aab-8c8d-bc65907408bc" alt="" width="563"><figcaption></figcaption></figure>

### **Code (JavaScript)**

The **Code** tab contains a code editor where you can enter **custom JavaScript code** that will be placed just before the closing tag of the \<head> or \<body> elements of your app.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FkHuxtM5rFJ9D7fXb5BrJ%2Fimage.png?alt=media&amp;token=9a8a25b4-4a35-4837-9041-5e013927902a" alt="" width="563"><figcaption></figcaption></figure>

Custom JavaScript code is only included in **locally exported** projects. It will be ignored for any projects published to the cloud.

### Progressive Web Apps (PWA)

A Progressive Web App (PWA) is a web application that combines the best of both worlds – the web and native applications. PWAs use web technologies to create an app-like experience, which is accessible from any device and platform.

They can be installed on devices similar to native apps, work offline, and integrate with the device and other installed apps. In other words, PWAs are a combination of the benefits of a website’s reach and the advantages of a native application’s functionality.

For information on creating a PWA, check out [**this article here**](https://learn.squirrel365.io/publishing-and-sharing/progressive-web-apps-pwa).