#17 - Populate Link From Custom Field v0.2

Use custom fields to populate link targets with one attribute!

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 #17 v0.2 💙 ADD CUSTOM FIELD AS A LINK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Parse member data from local storage
    const memberData = JSON.parse(localStorage.getItem('_ms-mem') || '{}');

    // Check if the user is logged in
    if (memberData && memberData.id) {
      // Get custom fields
      const customFields = memberData.customFields;

      // Select all elements with 'ms-code-field-link' attribute
      const elements = document.querySelectorAll('[ms-code-field-link]');

      // Iterate over all selected elements
      elements.forEach(element => {
        // Get custom field key from 'ms-code-field-link' attribute
        const fieldKey = element.getAttribute('ms-code-field-link');

        // If key exists in custom fields
        if (customFields.hasOwnProperty(fieldKey)) {
          // Get the custom field value
          const fieldValue = customFields[fieldKey];

          // Check if the custom field value is empty
          if (fieldValue.trim() === '') {
            // Set the element to display none
            element.style.display = 'none';
          } else {
            // Check if the link has a protocol, if not, add http://
            let link = fieldValue;
            if (!/^https?:\/\//i.test(link)) {
              link = 'http://' + link;
            }

            // Set the element href to the corresponding value
            element.setAttribute('href', link);
          }
        } else {
          // Set the element to display none if the custom field key doesn't exist
          element.style.display = 'none';
        }
      });
    }
  });
</script>

Description

Attribute

Member | Links

Populate a link using an URL stored in a custom field.

ms-code-field-link

Your_Field_ID

v0.2 - Hide link if empty

If the value of the custom field is empty, the element with the ms-code-field-link attribute will be set to display: none.

‍

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 make member specific profiles

Memberscripts needed

https://www.memberstack.com/scripts/populate-link-from-custom-field

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/custom-field-link

Why/When would need to make member specific profiles?

Allow users to personalize their profile pages with custom links to their websites or social profiles.
Improve social aspects of your website and foster a sense of community if members can share personal details with each other.

If your website allows users to create personal profiles and interact with each other, you’ll likely want to also allow them some customization options to really make their profiles their own.

One thing you can do in this regard is allow users to have custom links on their profiles.

Let’s look at how you can display buttons with custom links that populate based on what your users fill in in their profile settings.

How to populate links from custom fields on Webflow

In order to set this up, we’re going to use MemberScript #17 - Populate Link From Custom Field. 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.

Creating the UI

First thing’s first, you’re going to need to create the member profile page and add all the relevant information, buttons, and whatever else you need to have on your profile pages.

After you’ve created the buttons, you need to add this attribute to them: ms-code-field-link=”VALUE”, where VALUE should be whatever your custom fields are.

For example, if your members have a personal website field that they can fill in, your attribute might have the value set to website.

As usual, you can control whether the button link opens in a new tab or not and customize it in any way you normally would a button.

What’s great is that if the value of the custom field is empty, the element with the ms-code-field-link attribute will be set to display: none. This ensures you won’t have any broken buttons on member profile pages.

Making it work

Now that you’ve created and styled everything, you just need to add the MemberScript #17 custom code to your page, before the closing body tag.

This will provide the functionality needed to populate the button links from the custom fields that your members filled in. All you need to do is add the code and that’s it, you don’t need to change anything about it, as usual.

Conclusion

That’s all you have to do to populate links from custom fields. Now your website members can fill in personal details like website URLs or social media handles and their links will show up on their profile pages.