Ask AI

Linking Pages and Blocks

How to link blocks and pages within the Softr app.

Page Linking

πŸ’‘
Format: "/pathOfAnotherPage"

To link to another page on your website, use "/pathOfAnotherPage" format. The path of the page can be found in Page Settings => General => Url.

Example: If you have an "FAQ" page with url "/faq", then you should use "/faq" as a reference.

NOTE: To link to your homepage, simply use "/" as a reference.

Page URL
Page URL

Block Linking (also called Anchor Links)

Block linking allows you to link to a specific block on a page. When clicking on the link, it will scroll to a specific block on the same or another page.

πŸ’‘
"blockName" should be unique across the page

The block name can be found (and edited) inside the header of each block settings and is also prefixed by a # (see below).

Pricing block name
Pricing block name

To link to a specific section on the same or different page, you can use the Scroll to section option available for buttons and choose the required section as shown below.

Linking to a specific section of the page
Linking to a specific section of the page

External Website Linking

πŸ’‘
Format: "https://www.example.com"

To link to an external website, you simply enter the URL into the link field using the following format "https://www.example.com".

Β 

Using the Next-Page URL Parameter

In some instances you may want to dynamically redirect a user to a specific page in your app, for instance:

  • When a user needs to login with a Magic Link and be redirected to a specific page
  • When you need to provide deep links to pages that are behind a login.

To use the next-page parameter with links already containing parameters, simply append &next-page=<PAGE-SLUG> to the end of the original magic link. As an example, here’s a user magic link that will both log them in AND redirect them to a specific page called Product Details afterward: https://sample.softr.app/magic-authentication?magic-token=5c1e9b5&next-page=product-details

Β 

For other links without existing parameters, you can append ?next-page=<PAGE-SLUG> to the link to achieve a redirect without logging the user in first. For example:

https://sample.softr.app/dashboard?next-page=product-detail

Did this answer your question?
😞
😐
🀩

Last updated on December 6, 2022