The App Settings

What we call app settings in WeWeb are all of your project settings, but that are set to build the actual app.

As an example, a custom domain is a project setting, when a On App Load workflow is an app setting.

To get to the app settings, go to the editor, then click on the gear icon in the navbar:

Here is the list of all the options that are available to you in the app settings, in the order as they appear on the left sidebar:

Languages

Here, you're able to add new languages to your app, in addition to the default one that you selected when you created the app, by clicking the Add language button:

By using the toggle icons, you're also able to tell WeWeb which language should be your app's default one. Meaning that if a user lands on your live project and his/her browser's language doesn't match one of your app languages, the app will display in the default one.

In this example, if a user's browser isn't set to either English or French, the app will revert to English:

The last option tells WeWeb if your app's default language should be in your app's URLs paths.

By default, WeWeb creates URLs like this: https://{yourdomain}/{page-path}

But to navigate between languages, the lang code (ex: fr, en, es...) is added before the path, like so: https://{yourdomain}/{lang}/{page-path}

By setting this option to Yes, the lang code will also appear in the URLs for the default language:

Trigger workflows

Here, you can execute workflows for some specific triggers:

• On App Load (before fetching collections): trigger a workflow when the app is loaded by a user for the first time (i.e. at the beginning of a user session), but before collections are fetched from your backend
• On Page Load (before fetching collections): trigger a workflow when a page is loaded by a user, but before collections are fetched from your backend
• On App Load: trigger a workflow when the app is loaded by a user for the first time (i.e. at the beginning of a user session), but after collections are fetched from your backend
• On Page Load: trigger a workflow when a page is loaded by a user, but after collections are fetched from your backend
• On App Unload: trigger a workflow when the app is unloaded by a user (i.e. at the end of a user session, when he's closing his/her browser's tab)

Mobile App (PWA)

In this tab, you can setup options so that your WeWeb app can be installed on a mobile device as a Progressive Web App.

To install the app on their phone, users will need to open it in a browser and save it to the homescreen. When they click on the app's icon to launch it, it will behave like "classic" mobile app.

Here are the options you should set for this:

• App name: the name that will appear under the app when installed on a mobile device
• App icon: the icon the app will take on a mobile device home screen
• Theme color: you can refer to MDN's docs for this
• Background color: (MDN docs)[https://developer.mozilla.org/en-US/docs/Web/Manifest/background_color]

TIP

How users can save the app on their phone will vary depending on the phone and/or browser they're using.

iOS example

• browse to the web app
• tap on the Share icon
• choose Save to Home Screen

Android example

• browse to the web app
• tap on the Install icon
• follow on-screen instructions

Images

Here you can find all the images that are currently used to build the app, and hosted on WeWeb's servers:

Files

Here, you can upload and find files that are used to build the app (like PDF to display, CSV to download, etc), and hosted on WeWeb's servers.

Icons

In this tab, you can find the icon sets that are active on your app.

By default, you've got access to WeWeb regular icons, Fontawesome and Heroicons icon sets.

Fonts

Here are listed all the fonts currently used in your app.

Typography

The list of all the typographies used in your app.

Colors

The list of all the colors used in your app.

Redirections

Redirections are used when you want a path on your domain to redirect to another URL (be it on your domain or any other external URL).

It's especially useful for SEO, when you're switching from a former app/site to a WeWeb app.

To create a redirection, click on Add redirection:

Now for the concrete part, let's take an example.

Let's say that you used to have a page's URL at https://{yourdomain}/hello-world that you want to redirect to your WeWeb project's home page.

Simply enter the former path, the status, type of page and the new page, like so:

Let's deepdive into the parameters:

• Source: the path you want to redirect
• Target status: the HTTP status code you want to trigger on redirect (you can refer to MDN docs for this)
• Target type: Page or External URL. Page is to redirect to a page in your current app, external URL to redirect to any URL on the web
• Target Page or Target URL: the page or URL you want to redirect to

TIP: 90% of the time, when you want to do an SEO redirect, use a 301 redirect to forward Google's page rank and link juice to the new URL.

Custom code

Here you can add some custom code (HTML, CSS or JavaScript) that will be added to all your project's pages.

It's were you typically want to add a global CSS style or scripts from external tools like Google Analytics, Intercom chatbox, or Axeptio, to name a few.

You have the availability to add the scripts in the head or the body of the page.

TIP

Add the scripts in the header if you need them to be loaded before the rest of the page by the end user's browser. But add them in the body if they're not critical and to get better pagespeed, hence, better SEO performances.

WARNING

This is an advanced behavior. You can break your app if you don't know what you're doing or adding unknown scripts.

WARNING

When you add custom CSS to a page or project, you should not add any <head> or <body> tags. WeWeb handles those tags for you.

Base tag

WARNING: changing the base tag is an advanced feature that should be used if you 100% know what you're doing. You can totally break your app by changing it.

Changing the base tag is useful when you're hosting your WeWeb app yourself, on a specific subpath.

To know more, please refer to MDN docs.