#74 - Styling with Link Parameters v0.1

Update page styling based on a link parameter. Ex. ?ms-code-target=CLASSNAME&ms-code-style=display:block

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #74 v0.1 💙 UPDATE STYLING WITH LINK PARAMS -->
<script>
    // Function to parse URL parameters
    function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
    }

    // Function to apply styles
    function applyStylesFromURL() {
        const targetClass = getURLParameter('ms-code-target');
        const rawStyles = getURLParameter('ms-code-style');

        if (targetClass && rawStyles) {
            const elements = document.querySelectorAll(`.${targetClass}`);

            const styles = rawStyles.split(';').filter(style => style.trim() !== ''); // filter out any empty strings
            styles.forEach(style => {
                const [property, value] = style.split(':');
                elements.forEach(element => {
                    element.style[property] = value;
                });
            });
        }
    }

    // Call the function once the DOM is loaded
    window.addEventListener('DOMContentLoaded', (event) => {
        applyStylesFromURL();
    });
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Change Element Styles Using URL Parameters in Webflow

Memberscripts needed

https://www.memberstack.com/scripts/74-styling-with-link-parameters

Tutorial

Cloneable

Why/When would you need to Change Element Styles using URL Parameters in Webflow?

Change the styling of elements on a page based on user interaction – e.g. if they click on a button, a previously hidden element like an image can be displayed, or the color of another element can change, or the style of a heading, and so much more.

For a more interactive experience, you may sometimes want to change certain visual aspects of your page based on your visitors’ interactions with said page.

For example, maybe you have multiple price tiers displayed in a table and once a user expands the details of one tier, the others might fade out a bit.

We’re going to look at how you can use URL parameters to change element styles on your site. It’s quick, super easy, and you can do a lot of great things to improve your site’s UX with it.

Keep in mind, however, that you can only use one style parameter per element. For example, if you want a button’s style to change once users click it, you can only change one aspect of its style, say its color.

Changing element styles using URL parameters in Webflow

To change element styles using URL parameters on your Webflow site, we’re going to use MemberScript #74 – Styling with Link Parameters. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

All you really need to do to get it working is to add the MemberScript #74 custom code to your page, before the closing body tag.

Once that’s done, you can go ahead and use the following parameters in your URLs:

ms-code-target=class-name – simply replace “class-name” with the CSS class you want to change
ms-code-style=CSS-styling – replace “CSS-styling” with the new style

For example, if you wanted to change the color of a heading when users clicked a button, you would add the following link to the button:

https://yoursite.com/?ms-code-target=heading&ms-code-style=color:red

For this example to work, the heading’s class would have to be “heading.”

Keep in mind that all elements on the page that use the “heading” class will be affected.

Conclusion

That’s everything, you can now go ahead and test the URL parameters on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you dynamically tweak the styling of any element on your site using just a link parameter.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?

#74 - Styling with Link Parameters v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Change Element Styles Using URL Parameters in Webflow

Memberscripts needed

Tutorial

Cloneable

Why/When would you need to Change Element Styles using URL Parameters in Webflow?

Changing element styles using URL parameters in Webflow

Setting it up

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources