How to sync profile images between Webflow and Memberstack when Google login URLs exceed character limits?

• 

  A J

  • July 23, 2025 15:58

  Hey Katherine Tabinowski, I have come across similar issues with Gmail profile image 🫠 and haven't found an easy enough solution within the workflow yet.

  But for your use-case, the section where you have the "Edit profile" form where users can see and upload their profile image, you could remove the data-ms-member="profile-image" just from the image component and link it to the webflow cms image field (where you have the placeholder). 

  So I am visualizing it like this, user signs up via google, Memberstack saves their profile picture, we are not able to push it to Webflow CMS however so we have a placeholder. The user when sees their profile to edit some details, and the profile picture is linked to Webflow field so it shows up as placeholder (also in the member directory page), they then click the "Upload new" button which comes with the Memberstack profile image component and uploads a new one. This is saved in Memberstack now and also triggers your workflow in Make which will update the webflow image field to the new one.

  This way, even though we have different images in the back-end, users on the front-end know that they have to upload a new profile picture and once they do, its all synced up. Hope this helps.

  0
• 

  Katherine Tabinowski

  • July 23, 2025 16:00

  ok gotcha so bc my button as the data-ms-action="profile image" in the form to update the image it'll still update everything ok cool i will give that go thank you! glad it's already a known issue

  hey AJ so i tried out the solution you offered but now it's a bit wonky in that the image element isn't asynchronously getting updated anymore since the element no longer has the profile-image attribute on it, but since the image saves to memberstack instantly the toast shows up saying the image has been updated but the UI obvi doesn't reflect that. Any other thoughts on how I could manage this? is there a way to hit the api to update the profile image directly? or is it possible to suppress the toast showing up after an image is uploaded?

  0
• 

  A J

  • July 23, 2025 16:01
  Okay got it.

   

  There are a few ways of going about it, one is you could have the make workflow refresh the page for the user after the scenario is complete so that the image is loaded from the webflow CMS, but if that sounds like a not so good UX, you could try this approach out.

  • Duplicate the image element alone (and add the profile-image attribute to it) and hide it. So technically, the image element connected to webflow CMS must be visible and the one with the profile-image attribute can be kept hidden within the same block.
  • Add a ID to the image element that's connected to the webflow CMS image field (in my example the ID of the element is set to 'webflow-img'. (shown in the screenshot)
  • Add the following script to the page custom code in Before </body> tag section

  <script> 
  function updateProfilePicture() { 
  var profileImage = document.querySelector('img[data-ms-member="profile-image"]'); 
  var imgElement = document.getElementById('webflow-img'); 
  if (imgElement) { 
  var profileImageUrl = profileImage.src; 
  imgElement.src = profileImageUrl;
   }
   }
   var loadCount = 0; 
  document.querySelector('img[data-ms-member="profile-image"]').addEventListener('load', () => { 
  loadCount++; 
  if (loadCount > 2) { 
  updateProfilePicture();
   }
   });
   </script>

   

  This should update the webflow CMS image field visually on the site within a matter of seconds even before your make workflow has updated and published the changes in the back-end. Hope this helps.

  
  0

Please sign in to leave a comment.