Skip to main content

Customize web app URLs

Learn how to create and share custom app URLs and configure URL query parameters and hash properties.

Add custom URLs to your app

You can create a custom URL for your app to make it more discoverable by your end users. With a custom URL set, your app can be accessed at {domain}/app/{custom-url}. When sharing a Public Link, the app can be accessed at {domain}/p/{custom-url}.

Create and share a custom URL

Below is a walkthrough for creating a custom URL for your Retool app.

Disabling a custom URL makes all prior references invalid. You can disable a custom URL in App Settings > Page Settings.

Accessing apps with a custom URL

Apps with custom URLs always display the custom URL in the browser's address bar unless you're editing the app or using the mobile view. Even if you access the app from another app, publicly, or from the original link, the custom URL is displayed.

If you have a custom domain, shortlinks are accessible from both your custom domain and the Retool domain.

Configure URL query parameters

You can include URL query parameters when linking to an app and reference their values, such as passing a search term or setting the current view of a container. You can configure custom URL query parameters to store values in the URL and launch apps with certain characteristics using Retool's built-in URL query parameters.

Launch an app with URL query parameters

Retool supports query strings and hash properties when linking to an app. You can include these without any additional configuration to pass values into an app.

You can use the urlparams object to reference query strings, hash properties, and the current href value within apps. For example, you can set the Default view of a Container component with multiple views with {{ urlparams.view }}. Including the query string view=users would automatically select the users view key.

You can also include URL query parameters when configuring the Open app event handler.

Query strings

Query strings are key-value pairs appended to the app URL after the ? separator. You can include multiple query strings using the & separator, such as foo=bar&retool=awesome&hello=world.

Demo

Hash properties

A hash property contains key-value pairs appended to the URL after the # separator. Only one hash property can be included in a URL but it can contain multiple key-value pairs using the & separator.

Demo

Control characteristics with built-in URL query parameters

Public apps do not support built-in query parameters.

You can include the following query strings to control certain characteristics on launch, such as loading a specific release or environment.

Query stringValueDescription
_historyOffsetAny integer (1, 2, 3, etc.)Opens the Retool app to a previous point in its save history, counting back from the latest state. This is useful if you need to roll back changes because an app is not in a functional state (e.g., an infinite loop).

If you edit an app while in an offset version, those changes are saved at the "newest" position in the app history. Retool recommends using releases as you make changes to apps.
_embedtrue or falseHides all non-app UI. Useful for embedding Retool into other applications.
_releaseVersionAny valid release number (e.g, 2.1.1) or latestOpens the Retool app to a specific release version. Helpful for testing or sharing new changes with teammates.
_environmentAny valid environment name (e.g., production or staging)Opens the Retool app with the corresponding environment credentials. This is the same as clicking the environments dropdown via the UI.
_hideNavtrue or falseHides the Retool navigation bar.
_hideTimertrue or falseHides the query timer.

Configure custom URL query parameters

You configure custom URL query parameters in the URL parameters settings to sync property values as hash properties in the URL. Once configured, any changes to these values update automatically and also updates the current app state.

Store property values to the URL

To store property values in the URL, specify the parameter key names and corresponding values to store in the URL. Once set, any changes to those values automatically update the URL in the browser.

Storing page state in the URL.

Retrieve property values from the URL

To retrieve property values from the URL and update app state, specify which component properties to connect and a corresponding value.

Sync state between app and URL

To sync between the app and its URL, ensure that you both store the property value in the URL and connect the same property to the URL value. For example:

  • Store a search term using the searchTerm key with a value of {{ userSearch.value }}, a Text Input component.
  • Connect userSearch.value to {{ urlparams.hash.searchTerm }}.

Once configured, value changes are continually reflected between the app and URL. The following demo includes the query parameter #searchTerm=claire.

Demo

To set a default value on a component when connecting properties between the app and URL, use the URL parameter settings rather than the component's default value.

For example, to set the userSearch Text Input component to default to "Engineering", use a conditional when setting {{ userSearch.value }}.

Add a default value with URL parameters