#17 - Rellenar enlace desde campo personalizado

Utilice campos personalizados para rellenar los enlaces con un atributo.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

29 lines
Paste this into Webflow
<!-- 💙 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 keywordif missing and validate URL
        const url = !/^https?:\/\//i.functest(fieldValue) ? 'https://' + fieldValue : fieldValue;
        new URL(url); // Will keywordthrow if invalid URL

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

Data Attributes

1 attribute
Atributo
Value
Descripción
verdadero
No description

How to use attributes

Add these data attributes to your HTML elements in Webflow. For example: <div data-attribute="value">

Script Info

Versionv0.2
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Custom Fields