00:00
Buy Me a Beer

Change Webflow Text with Dynamic URL Parameters

Dynamically change the content of a Webflow page based on the URL parameter

Install VisualDX
Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Url Param Attribute

Copy this attribute:

vdx-url-param

Wrap the text you want to change in a Text Span and paste the attribute into the Custom Attributes Name field

Text
Text Span
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-url-param
Value

Add a Value to the Url Param Attribute

Give the Custom Attribute a unique Value.

This will be the name of the URL parameter you want to display (e.g., name, id, etc.).

In this example we are adding "name".

Text
Text Span
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-url-param
Value
name

Publish & Test

Test the functionality by navigating to your page with URL parameters.

Put "?name=Ailin" at the end of the URL that will be used to get a user to this page.

For example: https://www.visualdx.dev/docs/dynamic-url-params?name=Ailin

When a user visits the page via that link, the text span will now read as "Ailin".

https://www.visualdx.dev/docs/dynamic-url-params?name=John

When a user visits the page via that link, the text span will now read as "John".

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.