How to extract and pass Memberstack profile image URL to Webflow using Make? Answered

• 

  Karina Finegan

  • January 18, 2024 14:59

  Found a solution for this. If anyone has a similar issue, let me know.

  So what I needed was that the profile image that gets sent to the MemberStack - also be sent to a ‘Member’ Webflow CMS item.

  My “update profile” form includes the update profile pic input at the beginning of the form (as it is a separate form submission it cannot live as part of the Webflow form element) so to make it appear as part of one form it sits at the top.

  When a user uploads an image to MemberStack, the profile preview image is updated, so I added code that does the following:

  • Uses a mutation observer to listen for changes to the src attribute on the image preview element.
  • When that changes, the code takes the src attribute URL and places it in a hidden input field on the Webflow form.
  • When that ‘update profile’ form is submitted Make maps the hidden src URL to a profile pic CMS input on Webflow.

  So the CMS item has the url for the MemberStack profile image (hosted on AWS).

  Here’s the mutation observer code:

  function listenForSrcAttributeChange() {
    const profileImagePreview = document.querySelector('.ms-profile-image-preview');
    const profilePicUrlInput = document.getElementById('profilePicUrl');
  
    if (profileImagePreview && profilePicUrlInput) {
      const observer = new MutationObserver(function(mutationsList) {
        for (let mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
            const newSrc = profileImagePreview.getAttribute('src');
            profilePicUrlInput.value = newSrc;
          }
        }
      });
      observer.observe(profileImagePreview, { attributes: true });
    }
  }
  listenForSrcAttributeChange();

  0
• 

  Julian Galluzzo

  • January 18, 2024 14:59

  ah yeah i do something similar to feed a profile pic into the wf cms https://www.memberstack.com/webflow-templates/social-media-template

  0

Please sign in to leave a comment.