How to use query parameters to change text on a page

Page variables let you store values at the page level that can drive text, visibility, and other properties. Each page variable is automatically tied to a URL query parameter, so visitors can pass values through the URL and have them appear directly on your page, no code required.

This is useful for personalizing landing pages, showing campaign-specific headlines, or displaying values passed from emails, ads, or other referral sources.

How it works

When you create a page variable on a web page, Framer automatically assigns it a query parameter name based on the variable name. For example, a variable named “Headline” gets the query parameter headline. When someone visits your page with ?headline=Welcome+back, the variable value updates and any connected text layer displays “Welcome back” instead of the default.

Step 1: Add a text layer to your page

Add a text layer to the page where you want to display dynamic content from a query parameter.

Step 2: Create a page variable from the text layer

1. Select the text layer.

2. In the properties panel, click the + next to Content.

3. Select Create Variable.

4. Give it a name (for example, “Headline”) and set a default value. This is what visitors see when no query parameter is provided.

The text layer is now connected to the page variable. On the canvas, it shows the default value you set.

Step 3: Customize the query parameter name (optional)

By default, Framer generates the query parameter name by slugifying the variable name (for example, “Headline” becomes headline, “Search Query” becomes search-query). To use a different parameter name:

1. Open the Variables panel for the page.

2. Select the variable.

3. In the Query Param field, enter your preferred parameter name (for example, q instead of search-query).

Query parameter names must use lowercase letters, numbers, hyphens, underscores, dots, or tildes.

Step 4: Test it

1. Open a preview of your page.

2. Add the query parameter to the URL. For example: https://yoursite.com/landing?headline=Special+Offer

3. The text layer should display “Special Offer” instead of the default value.

If no query parameter is provided, the text layer falls back to the default value you set in the variable.

Supported variable types

Query parameters work with the following page variable types:

• Plain Text: displays the parameter value as text.

• Number: accepts numeric values.

• Boolean: accepts yes or no.

• Date: accepts date values.

• Collection Reference: accepts a collection item slug.

• Multi Collection Reference: accepts multiple collection item slugs.

Example use cases

• Personalized greetings: ?name=Sarah → “Welcome, Sarah!”

• Campaign-specific headlines: ?headline=50%25+Off+Today → “50% Off Today”

• Dynamic CTAs: ?cta=Start+Free+Trial → button text changes to “Start Free Trial”

• Referral tracking text: ?ref=partner-name → “Referred by partner-name”

Tips

• You can use multiple query parameters on the same page by creating multiple page variables, each connected to a different text layer or property.

• The default value acts as a fallback, so the page always looks complete even without query parameters.

• Query parameter names must be unique within a page. Framer warns you if two variables share the same parameter name.

• To combine static and dynamic text, use a text layer with mixed content and place the variable alongside fixed text.