#51 - Afficher les métadonnées des membres

Affichez les métadonnées des membres de manière dynamique sur votre site web.

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

26 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #51 v0.2 💙 DISPLAY MEMBER METADATA -->
<script>
  function replaceTextWithMetadata(metadata) {
    var els = Array.from(document.querySelectorAll('[ms-code-member-meta]'));
    els.forEach((el) => {
      const key = el.getAttribute('ms-code-member-meta');
      const value = metadata[key];
      if (value !== undefined) {
        el.innerHTML = value;
        el.value = value;
        el.src = value;
      }
    });
  }

  const memberstack = window.$memberstackDom;
  memberstack.getCurrentMember()
    .then(({ data: member }) => {
      if (member && member.metaData) {
        replaceTextWithMetadata(member.metaData);
      }
    })
    .catch((error) => {
      console.error('Error retrieving member data:', error);
    });
</script>

Tutoriel

Ce MemberScript vous permet d'afficher les métadonnées des membres de manière dynamique sur votre site web. Suivez les étapes suivantes pour commencer :

1. Paste the script before the closing </body> tag in your site's global scripts.

2. Add the ms-code-member-meta="your metadata key" attribute to any <div>, <span>, or text element where you want to display the corresponding member metadata.

For example, if you have a <div> element where you want to display the member's "name" metadata, you can use:

Replace "name" with the actual key of the metadata you want to display.

The specified elements with the ms-code-member-meta attribute will be dynamically replaced with the corresponding metadata values from the current member.