How to assign different JavaScript variable values based on plan type in Webflow page settings? Answered

August 24, 2025 16:29
5 comments

Good morning. I'm using MS on a webflow site and I'm trying to assign different values to js variables within the page settings based on plan type. Is this possible?

https://developers.memberstack.com/docs/dom-front-end-package - I have seen some of that, but am having a hard time tracking down what I need to get this to work. It's a real taped-together use of Webflow, SimplyBook.me, and MS.

Code: https://pastebin.com/RUTi8rBb

This is a rough implementation, but they are extremely budget conscious and we're at teh end of it.

I'm basically trying to detect what membership plan they have, then assign variables that get used to build the SimplyBook widget.

Thanks Duncan Hamra

Comments

5 comments

Chukwudi

August 24, 2025 16:33

Hi Trey,

Thanks for the information you provided. I've just reviewed your code and added the Memberstack part to it. This is what it should look like:

<script>
document.addEventListener("DOMContentLoaded", function () {
    const membershipConfig = {
        member: {
            serviceHolder: {{wf { "path": "service-number", "type": "Number" } }},
            categoryHolder: 25
        },
        owner: {
            serviceHolder: {{wf { "path": "owner-service-number", "type": "Number" } }},
            categoryHolder: 24
        }
    };

    // Default fallback values
    let membershipType = "guest";
    let serviceHolder = null;
    let categoryHolder = null;

    // Load Memberstack info
    window.$memberstackDom.getCurrentMember().then((member) => {
        if (member) {
            const planConnections = member.data["planConnections"] || [];

            // You can define your logic here for identifying "member" or "owner"
            const priceOwner = "prc_ID_OWNER"; // Replace with actual price ID for owner
            const priceMember = "prc_ID_MEMBER"; // Replace with actual price ID for member

            const priceIds = planConnections
                .filter(conn => conn.payment)
                .map(conn => conn.payment.priceId);

            if (priceIds.includes(priceMember)) {
                membershipType = "member";
            } else if (priceIds.includes(priceOwner)) {
                membershipType = "owner";
            }

            if (membershipType in membershipConfig) {
                serviceHolder = membershipConfig[membershipType].serviceHolder;
                categoryHolder = membershipConfig[membershipType].categoryHolder;

                // Now load the SimplyBook widget
                loadSimplyBookWidget(serviceHolder, categoryHolder);
            }
        }
    }).catch((err) => {
        console.error('Failed to load Memberstack data:', err);
    });

    function loadSimplyBookWidget(service, category) {
        var script = document.createElement('script');
        script.async = true;
        script.src = "//widget.simplybook.me/v2/widget/widget.js";
        script.onload = function() {
            new SimplybookWidget({
                "widget_type": "iframe",
                "url": "https://REDACTEDSITELINK.simplybook.me",
                "theme": "emeri",
                "theme_settings": {
                    "timeline_hide_unavailable": "1",
                    "hide_past_days": "0",
                    "timeline_show_end_time": "0",
                    "timeline_modern_display": "as_slots",
                    "sb_base_color": "#2c3b28",
                    "display_item_mode": "block",
                    "booking_nav_bg_color": "#ffffff",
                    "body_bg_color": "#ffffff",
                    "sb_review_image": "",
                    "dark_font_color": "#2c3b28",
                    "light_font_color": "#ffffff",
                    "btn_color_1": "#c98e5a",
                    "sb_company_label_color": "#ffffff",
                    "hide_img_mode": "0",
                    "sb_busy": "#8c8c8c",
                    "sb_available": "#b9bfb8"
                },
                "timeline": "modern_week",
                "datepicker": "top_calendar",
                "is_rtl": false,
                "app_config": {
                    "clear_session": 0,
                    "allow_switch_to_ada": 0,
                    "predefined": {
                        "service": service,
                        "category": category
                    }
                },
                "container_id": "widgetContainer"
            });
        };
        document.head.appendChild(script);
    }
});
</script>

Feel free to modify it to suit your use case.

Trey Tucker
- August 24, 2025 16:33
Chukwudi thanks for the help, but this isn't quite getting me there.

I think I'm missing something that allows me to use $memberstackDom.

For testing, I'm in console on the page I'm working on and I'm running the following within the console just to make sure I can get the member data and I'm getting "memberstack" is undefined.

let memberDetails = await memberstack.getCurrentMember();

so the code you sent me above isn't quite what I need. The issue is that they are handling all the billing of these memberships manually since they are expansive and most of their guests want to use checks.

Don't ask me.

So all the plans are free. Additionally, there are 5 plans, but each one can either be "member" or "owner". So I wrote this little bit of logic to somewhat explain what I need to do. Does this help clarify?
let memberPlanId = member.data.planConnections[0].planId;

if (memberPlanId.includes("member")) {
let membershipType = "member";
} else if (memberPlanId.includes("owner")) {
let membershipType = "owner";
}

Thanks again for the help

cc Duncan Hamra any help is greatly apprecaited.
0

Chukwudi

August 24, 2025 16:38

Here's the modified script:

<script>
document.addEventListener("DOMContentLoaded", function () {
    const membershipConfig = {
        member: {
            serviceHolder: {{wf { "path": "service-number", "type": "Number" } }},
            categoryHolder: 25
        },
        owner: {
            serviceHolder: {{wf { "path": "owner-service-number", "type": "Number" } }},
            categoryHolder: 24
        }
    };

    let membershipType = "guest";
    let serviceHolder = null;
    let categoryHolder = null;

    window.$memberstackDom.getCurrentMember().then((member) => {
        if (member) {
            const planConnections = member.data["planConnections"] || [];
            const planIds = planConnections
                .filter(connection => connection.planId)
                .map(connection => connection.planId);

            if (planIds.some(id => id.includes("member"))) {
                membershipType = "member";
            } else if (planIds.some(id => id.includes("owner"))) {
                membershipType = "owner";
            }

            if (membershipType in membershipConfig) {
                serviceHolder = membershipConfig[membershipType].serviceHolder;
                categoryHolder = membershipConfig[membershipType].categoryHolder;
                loadSimplyBookWidget(serviceHolder, categoryHolder);
            }
        }
    }).catch((err) => {
        console.error('Failed to load Memberstack data:', err);
    });

    function loadSimplyBookWidget(service, category) {
        var script = document.createElement('script');
        script.async = true;
        script.src = "//widget.simplybook.me/v2/widget/widget.js";
        script.onload = function() {
            new SimplybookWidget({
                widget_type: "iframe",
                url: "https://REDACTEDSITELINK.simplybook.me",
                theme: "emeri",
                theme_settings: {
                    timeline_hide_unavailable: "1",
                    hide_past_days: "0",
                    timeline_show_end_time: "0",
                    timeline_modern_display: "as_slots",
                    sb_base_color: "#2c3b28",
                    display_item_mode: "block",
                    booking_nav_bg_color: "#ffffff",
                    body_bg_color: "#ffffff",
                    sb_review_image: "",
                    dark_font_color: "#2c3b28",
                    light_font_color: "#ffffff",
                    btn_color_1: "#c98e5a",
                    sb_company_label_color: "#ffffff",
                    hide_img_mode: "0",
                    sb_busy: "#8c8c8c",
                    sb_available: "#b9bfb8"
                },
                timeline: "modern_week",
                datepicker: "top_calendar",
                is_rtl: false,
                app_config: {
                    clear_session: 0,
                    allow_switch_to_ada: 0,
                    predefined: {
                        service: service,
                        category: category
                    }
                },
                container_id: "widgetContainer"
            });
        };
        document.head.appendChild(script);
    }
});
</script>

Trey Tucker
- August 24, 2025 16:39
We are in business.

That worked perfectly.

Seriously. I can not thank you enough.

0
Chukwudi
- August 24, 2025 16:40
Awesome!! So glad to hear that everything worked out.

Really appreciate the kind words. Happy to help anytime! 🙌

0

Please sign in to leave a comment.