How to use the Pages

Pages are the main building blocks of your WeWeb app. They are the pages that your users will see when they visit your app. You can create as many pages as you want and you can use them to display any kind of content.

How to setup a page

Here's a small tutorial on how to create a simple (empty) page:

Let's go over all the steps:

1. Open the Pages panel by clicking on the Pages icon in the navbar
2. Click on Add page
3. Then, fill out the page creation options:
   1. Page name: the name of the page
   2. Copy page from: the page that you want to copy the content from. You can choose from any of the pages that you have already created.
   3. Page default path: the path of the page. This is the path that your users will see in the URL bar when they visit the page. You can change this path later.
4. Click on create

And voilà, your new page is up 🙌

Pages options

Here are all the options you can setup on every page. To access them, click on the page in the Pages panel and then click on the gear icon next to the page name, or click the page name in the navbar.

Page name

The name of the page. This is the name that you will see in the Pages panel.

Folder

The folder that the page is in. You can create folders to organize your pages.

Url paths

This is where you can change the path of the page. This is the path that your users will see in the URL bar when they visit the page.

You can also add variables to the path. For example, if you add a variable called id to the path, you can access the value of the variable in the page by using the From path in current page section in the data explorer.

TIP

Adding variables is helpful to create detail pages for your collections. For example, if you have a collection called products, you can create a page called products/{id} and then use the id variable to display the details of the product.

Metadata

This is where you can setup the metadata of the page. The metadata is the information that is used by search engines to display your page in search results.

Let's deepdive in all available options:

1. Title Tag: the title of the page. This is the title that will be displayed in the browser tab. This is maybe the most important SEO option, more info on how to set it up here.
2. Meta Description: the description of the page. This is the description that will be displayed in search results. This is the second most important SEO option, more info on how to set it up here.
3. Meta Keywords: the keywords of the page. This is the keywords that will be used by search engines to find your page.
4. Hide page in Google and other search engines: if you check this option, the page will not be indexed by search engines (similar to noindex, nofollow).
5. Favicon: the favicon of the page. This is the icon that will be displayed in the browser tab. It should be in a specific format, more info available here).
6. Open Graph image: the image that will be displayed in social media posts. This is the image that will be displayed when you share the page on social media. It should be in a specific format, more info available here.
7. Open Graph Title: the title that will be displayed in social media posts. This is the title that will be displayed when you share the page on social media. More info on how to set it up here.
8. Open Graph Description: the description that will be displayed in social media posts. This is the description that will be displayed when you share the page on social media. More info on how to set it up here.
9. Structured data: the structured data of the page. This is the structured data that will be used by search engines to display your page in search results. More info on how to set it up here.

Private access

This option is only available if you have an authentication provider setup in your app.

This is where you can setup the private access of the page. If you check this option, the page will only be accessible to users that are logged in, or to certain user groups.

WARNING

If you check this option, the page will not be accessible to users that are not logged in. So, if you want to access the page, you will have to login first. Meaning that this page shouldn't be setup as the redirect page in your authentication provider, otherwise users will end in an infinite loop 😱.

Trigger workflows

This is where you can setup the workflows that will be triggered when the page is visited.

TIP

This is useful to trigger specific workflows before any data (or collection) is fetched, or to trigger workflows after the page is loaded (like checking for a Stripe purchase, manipulating collection's data before displaying it, etc.).

Custom code

This is where you can add custom code to the page. You can add custom code either:

1. To the page header, so that it gets loaded right before the page is loaded (useful to add custom CSS or JS, hurts SEO performances).
2. To the page body, so that it gets loaded right after the page is loaded (useful for tracking scripts, doesn't hurt SEO performances).

TIP

This custom code will be installed to this page only. If you want to install app-wide custom code, you can do it in the Custom code section in the Settings panel. More info here.

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.

Languages

Here you can setup the languages of the page. If you have multiple languages setup in your app, you can add the page to the languages you want.

Let's see how it's done according to the screenshot:

1. Page languages: the languages that the page is available in. Toggle any project language to add the page to it.
2. Project languages: the languages that are available in the project. Here, you can add new languages, or edit the languages that are already available in the project and set if the URL of your pages should have the language code in it or not.

Duplicate {page}

Here, you can duplicate the page. This is useful if you want to create a page that is similar to another one, but with different content.

It's the same thing as creating a new page and selecting the current page as the Copy from.

Create collection page from {page}

Same as the Duplicate {page} option, but this time, you can create a collection page from the current page.

To learn more about collection pages, check this out.

Make {page} the homepage

Here, you can make the current page the homepage of your app. The homepage is the page that will be displayed when you access the root URL of your app.

Delete page

Here, you can delete the page. This is useful if you want to remove a page from your app.

How to setup a static collection page

A static collection page is a page, which bound to a collection, will duplicate itself for all of the items in the collection.

But, for each item, it'll keep the same design. It's useful to create a page that will display all the items of a collection.

What's the use-case?

Let's say you have a collection of products. On your homepage, you'll display all of the products of this collection, but then redirect each of them to a page with more information about each product. You will then create a static collection page, and bind it to the products collection. This page will then duplicate itself for each product, and display the product's information.

WARNING

To create a static collection page, you need to have a collection setup in your app, with the static mode.

TIP

Static collection pages are statically generated when you push the app to production. This means that they will be generated only once, and then they will be served directly from the CDN. This is why they are so fast and good for SEO.

Let's see how to create such a page:

Some explanations:

• You have to bind a static collection to the page. This is the collection that will be used to duplicate the page for each item in the collection.
• You have to bind the page path, which is a field in the collection, to the page path. This is the field that will be used to generate the URL of the page. For example, if you have a collection of products, and you want to create a page for each product, you can bind the page path field to the product name field. This way, the URL of the page will be https://your-app.com/product-name.

Then, on every element or workflow in this page, you'll be able to access the data of the item that is currently displayed:

(here, we show you how to bind a title, and we've done the same for the domain and the image, hence the final result)

How to link to a static collection page

First of all, you can link to a static collection page from any collection list that uses the same collection.

Indeed, WeWeb will automatically know to which instance of the static collection page to redirect to, based on the element in the collection list the user clicked on.

Let's see how to do it:

How to setup a dynamic collection page

Instead of creating static pages for each item in a collection, you can also create dynamic pages.

Dynamic pages actually have variables in their URL, that you can reuse in the page, and will be replaced by the actual value in the URL when the page is loaded.

Meaning that you can use this variable to do anything on your page, not only display single items from a collection.

Let's see how to create such a page:

Some explanations:

• You can add as many variables as you want to the URL of the page. But they need to all have a different name and be separated by a /. If possible, give them a default value that will help you build without having to change the URL.

Then, on every element or workflow in this page, you'll be able to access the data of the item that is currently in the URL:

How to link to a dynamic collection page

Dynamic collection pages use variables in the URL, meaning you're not even obliged to link to a collection, but can use this variables to do anything you want.

In this example, we use the variable to do a REST API request to get the data of the item we want to display:

TIP

If you were to use Airtable or any other tool, you could also filter the collection based on the variable, and then display the first item of the collection.