App settings

App settings are project settings used to build the application. For example, a custom domain is a project setting, but a On App Load workflow is an app setting.

To get to the app settings, open the More menu in the top navbar:

App settings menu

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 Appopen in new window.

Learn more about building and publishing a PWA in WeWeb.

App 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)

Page 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:

Images

In the Images sub-menu, you can find all the images that are currently used to build the app, and hosted on WeWeb's servers:

Project images

Files

In the Files sub-menu, 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.

Fonts

In the Fonts sub-menu, you can:

  • find all the fonts currently used in your app,
  • see or choose the default font of your app, and
  • add new fonts to your project.

Add a font in WeWeb

TIP

When you change the default font of your app, it will be reflected on all the text elements where the Font family is Default.

Font family default setting

Icons

In the Icons sub-menu, you can find the icon sets that are active in your app. By default, you've got access to WeWeb regular icons, Fontawesomeopen in new window and Heroiconsopen in new window icon sets.

TIP

Currently, importing a new icon set in a WeWeb projectopen in new window is a bit cumbersome but possible.

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:

Custom code example

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.

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.

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.

It would look something like this: Create redirection

The Source is the path you want to redirect (not the full URL but the path after the domain name).

The Target status is the HTTP status code you want to trigger on redirect (you can refer to MDN docs for thisopen in new window).

The Target type is the Page to redirect to a page in your current app or External URL to redirect to any URL on the web.

The Target page or Target URL is the page in your WeWeb project or external 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.

Once you added redirections in a project, they will be displayed in the Redirections tab:

WeWeb project redirections

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.

Override base tag in WeWeb

To learn more about base tags, please refer to MDN docsopen in new window.

Project plans

This is will open the Project plans tab where you can choose a different project plan:

WeWeb project plans

TIP

To switch to a different workspace plan, you'll need to go to the Members tab in your workspace dashboard:

WeWeb workspace plans

Development

This will open the Development panel where you can:

  1. open the WeWeb dev editor,
  2. view the custom elements, components, and plugins you added to the project, and
  3. learn more about developing custom components in WeWeb.

App development menu

Last Updated:
Contributors: Joyce Kettering