Page Settings

Just like an app has various screens and views, your Softr app has pages that will be used to hold the content of your app. These pages are categorized into two different types:

Application Pages - These pages will hold the primary content of your app, whether its static content or dynamic content pulled from your datasource. You can fully customize these to suit your needs.

Utility Pages - These pages are generated for you and handle more of the “housekeeping” side of your app such as password reset pages, 401 pages, invalid link pages, signup, login, and more. You can customize these to match your brand, but the core function of these pages is set for you.

Pages work in tandem with Navigation to help create a fluid, seamless experience for both you as the builder and the users of your application. Learn more about Navigation here.

Creating a page

You can access all pages by clicking on the Pages menu in the upper left of Softr Studio:

At the top of the Pages menu, you can see all of your app pages and also add new ones using the gold “+” button. You can re-order pages by clicking and holding on the Page name, then dragging it up and down the Page stack.

Hovering over any page will reveal a gear icon and an kebab icon. The kebab icon allows you to duplicate a page, delete a page, or hide a page by making it a draft. The only page that you cannot set as a draft or delete is the Home page. You can name change the Home page’s settings and duplicate it, but it cannot be hidden or removed (your app has to have a home page!).

Clicking the gear icon will let you edit the page’s general settings like name, url slug, SEO settings, Navigation, visibility, and more.

General

In the general settings, you can change the Page’s name (visible in Studio and in search engine results) and the url slug for the page (used to link people directly to this page in your app).

Navigation

In this section, select the Navigation you want to use for this page. You can use different navigation for different pages, create a new navigation from scratch, or choose not to use navigation at all.

SEO

The SEO section is where you will define the parameters for optimizing the page for search engines so that when someone searches for your app online, it appears in the search results. You want to use the SEO section to plug in keywords and phrases that match what your primary audience is searching for. Alternatively you can turn off search engine indexing if you don’t want people to be able to find this page in online search results.

Title - Shown in search engine results

Description - Show in search engine results

Search engine indexing - Turn this on for your page to appear in search engines and off to prevent search engines from showing it in search results. This is handy for hiding non-relevant pages to search engines such as account pages, private pages, or pages with sensitive information.

Canonical URL - You can tell search engines to prefer another version of this page over the current one. For instance, you have an old pricing page called /old-pricing that you still need to reference and show up in search results, but you prefer to show the new one called /pricing anytime someone performs a search for “app pricing”.

Here is an example of a search result where the pages SEO settings are displayed in a search engine. You can see the title of each page, along with a description, nested under the home page (softr.io). Proper SEO settings will help search engines better understand your site, rank it higher in search, and provide enhanced search results like this:

Social

Here you can edit settings for the page when someone shares the page link on social sites. This information appears in the social preview. It can also be helpful in boosting SEO slightly.

Title - This title is displayed as the page name in the social preview

Description - This is displayed as the page description in the social preview

Social Image - This image is shown in the social preview and looks best when following the recommended aspect ratio and pixel sizes.

Here’s an example of a social preview in iMessage on iOS. Note that the social preview will look a bit different for every platform:

Default footer

Here you can toggle whether to use the default footer you setup on the Home page or turn off the default and create a new footer specifically for the current page. You can also simply turn it off and not put in a footer if the page doesn’t need one. No footer is common for dashboards and reporting interfaces.

Visibility

Here you can select who this page should be visible to. Choose between All Users, Non-logged-in users, all logged-in users, or logged-in users from a specific user group(s). If a user tries to visit a page they are not allowed to see, they will be redirected to the Permission Denied utility page (401 page). More on utlity pages below. For more information on page visibility, you can also check out this help article.

Custom Code

In the custom code section of the page settings, you can inject HTML, CSS, and vanilla Javascript into the header or footer of the page. Any code added in these sections will apply only to the current page. You can learn more about implementing custom code and see some code snippets in our Custom Code docs.