Webflow Membership: Add user-specific link

[vitoriadias (Vitoria)]

Hello!

I’m designing a website for a neighbourhood in my city where each household will have an account (using webflow membership). One of the features they want is to add a link field where the household can download their invoice for the annual fee (we are not using the e-commerce option).

Unfortunately webflow doesn’t allow (at least yet) for us, the one managing the website, to add the specific link to their account, but they do have a field input where the user can add a link on their end. I thought it would be doable to add the invoice link in input field in the backend, but because its a field, the user will be able to edit the link, which of course is not ideal.

So I was wondering if there is a way to code my way into turning that field into a link where they can download their invoice.

---

Here is my site Read-Only: Webflow - ERHA
(how to share your site Read-Only link)

[memetican (Michael Wells)]

Sort of, but not ideally.

Unfortunately you can not bind elements to Current User data, the way you can bind to CMS items, so you’ll have to script a solution for this.

Off the top of my head, I imagine it would look like this;

MEMBERSHIP SETUP
Create a custom Membership field for your users called Invoice Link.

ADMIN
Populate the content using the member admin console, or through the Update User API.

MEMBER UI
On the User Account page, add your custom field, but wrap it in a hidden DIV. It will exist as an editable field, but be hidden from view.

Write a piece of script that delays 1 second, and the gets the value of that input element, and sets the src of a “View Invoice” link element or button you’ve designed. I’d hide that link initially too, and then make it visible only after setting the src value. That way they can’t click an un-set link.

NOTES

I think what you’re really wanting here is User-level gating on CMS Items. Then you can have an Invoices collection, where each invoice is tied to a specific User. No one else can access it. In theory, you’d setup a collection list, and it would be able to show that User’s invoices, descending by date, and no one else’s.

I’m not clear where those capabilities fit on the Membership team’s roadmap. Gating is a priority, but they’ve been pretty quiet about CMS item gating.

Also, the 1 sec delay is annoying, but I’ve done some experiments with this, and not found a good way around it. The problem is that when you load the User Account page, you see a delay before Webflow populates those fields with content.

That population is done by script, so it does not trigger a change() or input() event that we can use to capture the value once it’s available. Mutation observers also do not work here, since they’re changing the val() property of the input field and not the value attribute. So the HTML itself isn’t changing, and the mutation observer doesn’t trigger.

The only solution I’ve found is a timer delay.

[ChrisDrit]

Hi @vitoriadias welcome to the forum.

@vitoriadias

I’m designing a website for a neighbourhood in my city where each household will have an account (using webflow membership). One of the features they want is to add a link field where the household can download their invoice for the annual fee (we are not using the e-commerce option).

You can do that. You’re just a tab bit limited without a “hack”.

You can add custom fields to the Users Membership:

In the above screenshot I added a “zip code”.

Then you can add it to their account page:

This will be unique to each membership.

It’s not the perfect solution, but it’s the quickest

[mrzevon (Peter)]

@vitoriadias, following the footsteps here provided by @memetican , I used the following code:

<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
// Get the form field element
  var formField = document.getElementById("manage-subscription");

  // Get the link element
  var link = document.getElementById("manage");

  if (formField && link) {
    // Get the value from the form field
    var fieldValue = formField.value;

    // Set the href attribute of the link to include the scraped data
    link.href = fieldValue;

  } else {
    console.log("Form field or link not found.");
  }
}, 1000); // 1000 milliseconds = 1 second
});
</script>

Basically my form field to be scraped was called “manage-subscription”, while I pasted a text link with the form id of “manage”. I even added a little delay animation of load gif with 1.5 sec delay,

… and then…

Neat!

The best part? ChatGPT wrote this for me lol.