Webflow sync, pageviews & more.
NEW

Mark Demo as Complete

Example

Mark Demo as Complete

Description

Mark a demo as complete on your Webflow site that uses Memberstack. A great way to track progress of your users learning course and progress throughout the campaign.

Instructions

  1. Add the Javascript code to the closing body custom code section
  2. Update your memberstack ID in the script SRC
  3. Update the Javascript sections (CMS/class names)

Javascript snippet

Copy

<!-- Add to body close section -->
<script src="https://api.memberstack.io/static/memberstack.js?webflow" data-memberstack-id="[GET FROM MEMBERSTACK]"></script>

<script>
MemberStack.onReady.then(async function(member) {

	// Checks if member is logged in
	if(member.loggedIn){
		
	const metadata = await member.getMetaData();

	// If no metadata.video exists, create it in MemberStack.
  	metadata.videos = metadata.videos || [];

	// Defines the webflow video ID to a const of itemID (Pull this from the CMS)
		const itemID = "[GET FROM CMS]"

	// If they have the item ID in their profile, hide the form, show the 'completed button'
	if(metadata.videos.includes(itemID)){
		document.getElementById('mark-as-watched').style.display = 'none';
		document.getElementById('video-complete').style.display = 'block';
	}
		
	// When the button is clicked, if the itemID doesn't exist on their profile
	// add it, then push the metadata to MemberStack. 
	$('#mark-as-watched').click(function(){

  		if(metadata.videos.indexOf(itemID) === -1){

				metadata.videos.push(itemID); 

  	  	member.updateMetaData(metadata);

      }
		});
  }
});
</script>

CSS snippet

Copy

HTML snippet

Copy
Mackenzie Child

Mackenzie Child

expert
0
3
0
1
Get it
Like
Like

Snippet tags

Set
CMS
Count
Javascript
Flowradar
Code snippets
Mark Demo as Complete

Related code snippets

Go to snippets
Countdown timer

Countdown timer

Nikolai Bain
EXPERT
2

Add a countdown timer to your Webflow site with this simple Javascript snippet. Want to display a countdown timer to a time of your choosing on your Webflow site? Now you can easily add one with this Javascript snippet.

Reading Time Blog/Article Page

Reading Time Blog/Article Page

Corey Moen
EXPERT
1

Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.

Random CMS Sort on Page Load

Random CMS Sort on Page Load

Corey Moen
EXPERT
3

Webflow's random sort feature doesn't always work. This method allows for truly random sorting of Webflow CMS items on page load.

Set referring URL as hidden input

Set referring URL as hidden input

Corey Moen
EXPERT
6

A method to pass the referring domain/URL as a hidden field in a form in Webflow. This is perfect to know who referred the person submitted the form, or a way to display the referring domain on the page on your Webflow site.

Split CMS Collection into Multiple Sections

Split CMS Collection into Multiple Sections

Timothy Ricks
EXPERT
2

Split up your Webflow CMS collections into multiple sections with this Javascript code snippet. This allows you to easily break up a collection lists into multiple sections, a great way of adding your own elements in between a Webflow CMS collection list.

Number of CMS Item Count

Number of CMS Item Count

Timothy Ricks
EXPERT
3

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

Set URL from Tab Change

Set URL from Tab Change

Corey Moen
EXPERT
4

Link to specific tabs using URL parameters by setting tab URLs in Webflow. This script allows you to set the tab name in the elements panel for the tabs that you want the URL to include for each tab. The URL will use the # parameter, for example something like example.com#tabName where tabName is the element ID you set on the tab. This allows you to link to specific tabs from other pages and have more control over the tab experience.

CMS Add to Calendar Button

CMS Add to Calendar Button

Corey Moen
EXPERT
2

Add a Calendar button for via your Webflow CMS via this custom Javascript and CSS. This enables your users to easily add events to their calendars based on dates/information in your Webflow CMS.

DRAG
Real-time sorting by

More from author

See all
Mark Demo as Complete

Mark Demo as Complete

Mark a demo as complete on your Webflow site that uses Memberstack. A great way to track progress of your users learning course and progress throughout the campaign.

DRAG
Real-time sorting by