Project Settings
Last updated
Was this helpful?
Learn Section
Last updated
Was this helpful?
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.
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.
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.
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.
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.
A dropdown option that will determine how the project scales to the webpage.
The default selection, 'None' will apply no scaling to the project, and will display as the pixel width and height determined by the canvas.
Selecting 'Fit to width' will scale the project frame, expanding the width of the project to match that of the browser width.
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.
With this radio option, there is the option to enable or disable the Loading Indicator for the project as it generates in the browser. By default, this is set to 'On'.
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.
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.
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.
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.
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.
Enabling 'Show spinner while items load' will display a loading spinner in the pace of hidden content while it is loading.
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.
Add a GTM container ID to include Google Tag Manager code and load tags that have been configured in GTM in your published app.
Custom CSS and JavaScript code are not validated and may cause issues with the published app.
Select Custom options from the project settings menu to specify custom CSS and custom JavaScript for your project.
The Style tab contains a code editor where you can create custom css classes for use in your projects.
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.
Custom JavaScript code is only included in locally exported projects. It will be ignored for any projects published to the cloud.
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 more details, see our .
For information on creating a PWA, check out .
