Wized Docs

Appearance

Add Parameter to Link ​

The Add Parameter to Link setting allows you to add additional information to links on your website. This information is appended to the end of the URL in the form of query parameters, which are key-value pairs separated by question marks and ampersands.

For example, if you have a link to a product page with the URL https://mystore.com/product, you can add a query parameter called id with the value 12345 to indicate which specific product should be displayed: https://mystore.com/product?id=12345.

How does it work? ​

  1. Select the element: Choose the element from the elements panel in Webflow. Ensure that the element has a configured destination URL.
  2. Apply the Add Parameter to Link setting: In the "Settings" tab of the properties panel, select the Add Parameter to Link action.
  3. Choose the parameter: Use the dropdown menu to select the parameter you want to add to the link. Ensure that all parameters are correctly defined in the "Navigation" section of the Data Panel to avoid confusion.
  4. Define the value in the Function Editor: Use the Function Editor to specify the value you want to assign to the parameter. You can use any available data, such as variables, cookies, API responses, or even the value of other inputs.
  5. Done! When you click the link, the parameter and its value will be automatically added to the destination URL. On the destination page, you can access this value using n.parameters.parameter_name in the Function Editor.
  • Dynamic Detail Pages: Pass the ID of a product, item, or other to load specific information about that product on the destination page.
  • Filters and Searches: Pass search criteria or filters through parameters to display relevant results on the next page.
  • Campaign Tracking: Add UTM parameters to your links to analyze traffic and performance of your marketing campaigns.
  • Personalization: Pass user information or preferences to personalize the content or functionality of the destination page.

Practical Example ​

Imagine you have a list of products on your website and want to redirect the user to a details page with specific information about that product when they click on it. You can achieve this as follows:

  1. In Webflow, create a link in the product card that points to the details page.
  2. Apply the Add Parameter to Link setting.
  3. Select the parameter productId (make sure you have created it previously in the Data Panel).
  4. In the Function Editor, write:
javascript
// Get the product ID from the rendered list
return r.getProducts.data[v.i].id; // 'v.i' must correspond to the index of the product being clicked
javascript
// Get the product ID
return r.getProduct.data.id;

Now, when clicking on a product, the destination URL will include the productId parameter with the corresponding ID, allowing you to display the correct information on the details page.