#17 - Populate Link From Custom Field v0.2

Use custom fields to populate link targets with one attribute!

View demo

<!-- 💙 MEMBERSCRIPT #17 v0.3 💙 ADD CUSTOM FIELD AS A LINK -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const memberData = JSON.parse(localStorage.getItem('_ms-mem') || '{}');
    if (!memberData?.id) return;

    document.querySelectorAll('[ms-code-field-link]').forEach(element => {
      const fieldKey = element.getAttribute('ms-code-field-link');
      const fieldValue = memberData.customFields?.[fieldKey]?.trim();

      if (!fieldValue) {
        element.style.display = 'none';
        return;
      }

      try {
        // Add protocol if missing and validate URL
        const url = !/^https?:\/\//i.test(fieldValue) ? 'https://' + fieldValue : fieldValue;
        new URL(url); // Will throw if invalid URL

        element.href = url;
        element.rel = 'noopener noreferrer';
        element.target = '_blank';
      } catch {
        element.style.display = 'none';
      }
    });
  });
</script>

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

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.

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.

Join the 2.0 Slack
Version notes

v0.3 - Security improvements

Fixed an issue which could lead to Google incorrectly reporting the page as phishing.

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.

Attributes
Description
Attribute
Member | Links
Populate a link using an URL stored in a custom field.
href, custom link, url, dynamic
ms-code-field-link
Your_Field_ID
Your_Field_ID
Tutorial
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more

"We've been using Memberstack for a long time, and it has helped us achieve things we would have never thought possible using Webflow. It's allowed us to build platforms with great depth and functionality and the team behind it has always been super helpful and receptive to feedback"

Jamie Debnam
39 Digital
Slack

Need help with this MemberScript? Join our Slack community!

Join the Memberstack community Slack and ask away! Expect a prompt reply from a team member, a Memberstack expert, or a fellow community member.

Join our Slack