Dynamic URL Button — Carry promo codes between pages

Introduction

Have you ever wanted to create a button in Framer that opens a new page with your campaign’s promo code in the URL? Something like www.yourwebsite.com/waitlist?promo=ABCD

In this article, we'll explore how to create a component that dynamically captures promo codes and configures destination URLs for better campaign management.

Before we begin, I want to tell you this: yes, you can build the same feature in Framer using a code override. If you are comfortable with that, then you can surely do it.

We’ll start by creating the base UI, add customizable variables to the button, implement the URL parameter tracking logic, and finish by testing the feature.

Create a code component

Start by hitting ⇧+⌘+K in a new Framer project. This keyboard shortcut lets you quickly create a code component or override. Name it 'DynamicSignupButton' and select 'New Component'.

This opens a code editor and a preview window with boilerplate code. Let's remove all of the code except the Framer import and the `return()` block.

Designing a basic button UI

We will return a `<button>` element and use inline CSS styling to create something close to the following button UI:

Let's first use the styles defined by Framer, then override them with the custom styles we'll define from the next line. For this, we use `...props.style`.

Then, we add the relevant UI properties, such as padding, font size, background color, etc., to get the correct styling for our button. Your code should now look like this:

You can now exit the code editor, hit ⌘+K to insert our new button component in our desktop breakpoint. But something is missing...Framer components won't be components without any variables. Let's work on adding some.

Implementing customization with variables

We will be adding the following variables:

1. Button label

2. Base URL (your Framer site homepage link),

3. Parameter name (the name or label of the parameter. Ex: www.yourwebsite.com/waitlist?promo=ABCD)

4. Default promo code

To add property controls (variables) for our component, we will use Framer's `addPropertyControls` function. This function takes two arguments: the first is the component name, and the second is an object that defines controls for each property.

Let's start with the `label` property, setting its `ControlType` to `String`. Same with the `parameterName` and `defaultPromoCode`. For the `baseURL`, we set it to a `Link` control.

Make sure you import both the `addPropertyControls` and `ControlType` at the top. After this, your code should look like this:

If you now select the component in Framer, you should see the three new variables exposed with their default values:

Next, let's track the main URL parameter for the promo code.

Tracking URL parameters

We first define a state to track the promo code. We will initialize it with `defaultPromoCode` if it exists; otherwise, we leave it empty. Then we run a `useEffect` hook to read the current page's URL parameters using the `URLSearchParams` interface. We retrieve the parameter value using the parameter name (like 'promo') and store it in a local `promo` variable. If there’s no match in the URL, we fall back to the `defaultPromoCode`.

Next, we need to add a click event to our button. Let's call it`handleClick`.

First, we construct the URL we’ll redirect the user to: if `baseURL` is provided, we use it; otherwise, we default to the current site URL (www.yourwebsite.com).

Second, we check whether both `parameterName` and `promoCode` exist, and then append them to the `url`. This will attach a promo code like 'BLACKFRIDAY' as `?promo=BLACKFRIDAY`.

Finally, we redirect the user to the final URL using the `window.location` object to replace the current page with the new one (the one the user clicked), and we convert our `url` to a whole URL string with `url.toString()`.

Here's how your `handleClick` function should look after this change:

Time to test it!

Time to see how it will work. Follow the steps below, and we should be good to go:

1. Add the component's variable values. I have used the following:

• Label: Sign up

• Base URL: https://salmon-company-435079.framer.app/redirected-page (you will need to create this new redirected page in Framer)

• Parameter Name: promo

• Default Promo Code: ABC

2. Publish your Framer project and append a query string in the address bar like so: `?promo=BLACKFRIDAY`. Your full URL should look like this:

`https://salmon-company-435079.framer.app/?promo=BLACKFRIDAY`. Press enter to reload the page.

3. Now, when you click the button, it should redirect you to the base URL (/redirected-page) along with the promo code attached to it:

`https://salmon-company-435079.framer.app/redirected-page?promo=BLACKFRIDAY`.

The code component preserves any promo code from your campaign when you navigate between pages, whether internal or external, using query parameter logic.

Conclusion

In this tutorial, we learned how to create a button UI with code, add customizable variables, track the promo code via a URL query parameter, and test it. Whether you’re running a marketing campaign, monitoring affiliates, or just passing dynamic parameters between pages, this component gives you a clean, flexible way to do it — all inside Framer.