Back

Back

Back

Change Variants with URL Parameters

Change Variants with URL Parameters

Page Contents

Page Contents

Page Contents

Use a URL parameter to change the variant on the page you link to.
Use a URL parameter to change the variant on the page you link to.
Use a URL parameter to change the variant on the page you link to.

Use a URL parameter to change the variant on the page you link to.

So, what does this do? Let’s say you have a link on one page that directs to another, and when you reach that page, you want the variant to change based on a parameter in the URL. Makes sense?

I use this setup on a site where links to a contact form adjust the form variant based on the URL parameter. This way, I have a single contact page with multiple forms, which I can easily update or expand as needed.

You could use this to handle multiple pages with different forms—or keep it all on one page. Your choice!

It’s really easy to implement, and while you may not need it now, you might someday. Enjoy! You’re welcome.

If you are not sure how to add code to Framer watch this quick video.

Change Variants with URL Parameters

Framer Code Overide

1.0

1.0

1.0

1.0

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// URL variable to variant
// Version 1.0

import { Override, Data } from "framer"

// Create a Data object to store the current variant
const store = Data({
    currentVariant: "default"
})

// Function to update the variant based on URL
function updateVariantFromURL() {
    const urlParams = new URLSearchParams(window.location.search)
    const urlVariant = urlParams.get("variant")
    if (urlVariant) {
        store.currentVariant = urlVariant
    }
}

// Call this function when the component mounts
if (typeof window !== "undefined") {
    updateVariantFromURL()
    // Optional: Listen for URL changes
    window.addEventListener("popstate", updateVariantFromURL)
}

export function VariantOverride(): Override {
    return {
        variant: store.currentVariant
    }
}

CLICK TO COPY

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// URL variable to variant
// Version 1.0

import { Override, Data } from "framer"

// Create a Data object to store the current variant
const store = Data({
    currentVariant: "default"
})

// Function to update the variant based on URL
function updateVariantFromURL() {
    const urlParams = new URLSearchParams(window.location.search)
    const urlVariant = urlParams.get("variant")
    if (urlVariant) {
        store.currentVariant = urlVariant
    }
}

// Call this function when the component mounts
if (typeof window !== "undefined") {
    updateVariantFromURL()
    // Optional: Listen for URL changes
    window.addEventListener("popstate", updateVariantFromURL)
}

export function VariantOverride(): Override {
    return {
        variant: store.currentVariant
    }
}

CLICK TO COPY

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// URL variable to variant
// Version 1.0

import { Override, Data } from "framer"

// Create a Data object to store the current variant
const store = Data({
    currentVariant: "default"
})

// Function to update the variant based on URL
function updateVariantFromURL() {
    const urlParams = new URLSearchParams(window.location.search)
    const urlVariant = urlParams.get("variant")
    if (urlVariant) {
        store.currentVariant = urlVariant
    }
}

// Call this function when the component mounts
if (typeof window !== "undefined") {
    updateVariantFromURL()
    // Optional: Listen for URL changes
    window.addEventListener("popstate", updateVariantFromURL)
}

export function VariantOverride(): Override {
    return {
        variant: store.currentVariant
    }
}

CLICK TO COPY

What is it?

Use a URL parameter to change the variant on the page you link to.

What is it?

Use a URL parameter to change the variant on the page you link to.

What is it?

Use a URL parameter to change the variant on the page you link to.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Change Log

// Version 1.0

Figma to Framer

Support

If you need support first watch the help video above. If that does not help reach out to me on one of my social channels or use the contact form. As I am a team of one it may take a short while to get back to you. Please be patient, thanks.

Hope this helps. Good luck with your project.

More Framer resources.

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component

Build simple form experiences that look, feel and work like a multi-step form.

Multi-step Form Experience

Build simple form experiences that look, feel and work like a multi-step form.

Section

Build simple form experiences that look, feel and work like a multi-step form.

Multi-step Form Experience

Build simple form experiences that look, feel and work like a multi-step form.

Section

Build simple form experiences that look, feel and work like a multi-step form.

Multi-step Form Experience

Build simple form experiences that look, feel and work like a multi-step form.

Section