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.
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.
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
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
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
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
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override
Simple Documentation Maker
Need a simple documentation system? This component adds auto linking contents list to a one page document system.
Code Component
Simple Documentation Maker
Need a simple documentation system? This component adds auto linking contents list to a one page document system.
Code Component
Simple Documentation Maker
Need a simple documentation system? This component adds auto linking contents list to a one page document system.
Code Component
Multi-step Form Experience
Build simple form experiences that look, feel and work like a multi-step form.
Section
Multi-step Form Experience
Build simple form experiences that look, feel and work like a multi-step form.
Section
Multi-step Form Experience
Build simple form experiences that look, feel and work like a multi-step form.
Section