Streaming live at 10am (PST)

How to use Memberstack frontend API requests in HTML embed code

Hello!
I was wondering if I could get advice on how to connect to memberstack api to use their update methods on members(https://help.memberstack.com/en/articles/3850012-front-end-api). I am trying to update the member data after the user finishes watching at least 90% of the video on our site. I am using a custom code element instead of a video element to show the video like this:

and this is what I have so far in that HTML embed:

<div class="ratio">
  <div class="vimeo" id="427174875"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  initVimeo();
});

function initVimeo() {
	let total_viewed_time = 0, start_time = 0, end_time = 0, length=0, isFinished=false;
  const vimeo = document.getElementsByClassName("vimeo")[0];
  
  const options = {
    url: '{{wf {&quot;path&quot;:&quot;video-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
    responsive: true,
    quality: "720p",
    width: "100%"
  };

  const player = new Vimeo.Player(vimeo, options);
  
  player.on('timeupdate', function(data) {
    	if (data.percent >= 0.9) {
        end_time = new Date().getTime(); // milliseconds
        total_viewed_time += end_time-start_time; // milliseconds
        
        if (total_viewed_time >= length && isFinished===false) {
        	 isFinished = true;
           // update member data through memberstack api here
           MemberStack.onReady.then(function(member) {   
            console.log(member["name"])
            console.log(member.loggedIn) // returns true or false
          })
           
        }
      }
  });
  player.on('play', function(data) {
  		start_time = new Date().getTime(); // milliseconds
    	end_time = start_time;
  });
  player.on('progress', function(data) {
  		length = data.duration * 900
  });
}
</script>

And it returns undefined for the console log part:
image

I’m wondering what might be missing, since I have already installed Memberstack header script in the project setting->Custom code->Head code.

Would really appreciate any suggestions!! Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@cchae216 - just a shot in the dark, but are you logged in? It seems like it will return false if you aren’t, therefore your member name will also be undefined.

2 Likes

Thank you!! It works!!

1 Like