#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>

Descripción

Atributo

Miembro | Enlaces

Rellenar un enlace utilizando una URL almacenada en un campo personalizado.

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.

Cómo crear perfiles específicos para los afiliados

Miembros necesarios

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

Tutorial

Clonable

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

¿Por qué/cuándo sería necesario crear perfiles específicos para cada miembro?

Permita a los usuarios personalizar sus páginas de perfil con enlaces a sus sitios web o perfiles sociales.
Mejore los aspectos sociales de su sitio web y fomente el sentido de comunidad si los miembros pueden compartir datos personales entre sí.

Si su sitio web permite a los usuarios crear perfiles personales e interactuar entre sí, es probable que también desee permitirles algunas opciones de personalización para que realmente hagan suyos sus perfiles.

Una cosa que puedes hacer en este sentido es permitir que los usuarios tengan enlaces personalizados en sus perfiles.

Veamos cómo mostrar botones con enlaces personalizados que se rellenan en función de lo que los usuarios introducen en la configuración de su perfil.

Cómo rellenar enlaces desde campos personalizados en Webflow

Para configurar esto, vamos a utilizar MemberScript #17 - Populate Link From Custom Field. Siga el enlace para obtener el código que necesita para agregar a su página y ver un video tutorial sobre cómo configurar todo.

Creación de la interfaz de usuario

Lo primero es lo primero, vas a tener que crear la página de perfil de miembro y añadir toda la información relevante, botones y cualquier otra cosa que necesites tener en tus páginas de perfil.

Una vez creados los botones, debe añadirles este atributo: ms-code-field-link="VALUE", donde VALUE debe ser cualquiera de sus campos personalizados.

Por ejemplo, si sus miembros tienen un campo de sitio web personal que pueden rellenar, su atributo podría tener el valor establecido a sitio web.

Como de costumbre, puedes controlar si el enlace del botón se abre en una nueva pestaña o no y personalizarlo de cualquier forma que harías normalmente con un botón.

Lo mejor es que si el valor del campo personalizado está vacío, el elemento con el atributo ms-code-field-link se establecerá en display: none. Esto asegura que no tendrás ningún botón roto en las páginas de perfil de los miembros.

Hacer que funcione

Ahora que ha creado y estilizado todo, sólo tiene que añadir el código personalizado MemberScript #17 a su página, antes de la etiqueta body de cierre.

Esto proporcionará la funcionalidad necesaria para rellenar los enlaces de los botones desde los campos personalizados que rellenaron sus miembros. Todo lo que necesitas hacer es añadir el código y eso es todo, no es necesario cambiar nada al respecto, como de costumbre.

Conclusión

Eso es todo lo que tienes que hacer para rellenar los enlaces de los campos personalizados. Ahora los miembros de tu sitio web pueden rellenar sus datos personales, como URL de sitios web o cuentas de redes sociales, y sus enlaces aparecerán en sus páginas de perfil.