00:00
Buy Me a Beer

Add Query Parameters to Webflow Links

Dynamically Add Query Parameters to Webflow Links

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-param-*

Paste the attribute into the Custom Attributes Name field of a Webflow Link Block or Button.

Body
Link Block
Link Block
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-param-*
Value

Add Key to Url Param Attribute

Replace the * with your parameter name. (e.g., name, id, utm_source etc.).

In this example we are replacing * with utm_source

Body
Link Block
Link Block
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-param-utm_source
Value

Add Value to Url Param Attribute

In the Value field add the value you want to append to the URL. This can be static text or bound to a CMS field

Body
Link Block
Link Block
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-param-utm_source
Value
www.visualdx.dev

Publish and Test

Test the functionality by clicking the button.

The page will refresh with the follow URL parameters

?utm_source=www.visualdx.dev

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.