Hello everyone!!
I’m facing a challenge and could really use your expertise. Here’s what I’m working on:
I run FlowKitPro, a professional webflow components library, and I’m aiming to implement a tracking system. I want to keep track of which member has copied which design, and then transfer this data to Airtable. Whenever a member clicks the ‘copy’ button for a component, I need to capture their member ID, email, as well as the name and ID of the design they’ve copied. The design’s ID is the item ID in the CMS.
I’ve tried setting up a zapier webhook based on the code provided by ChatGPT, with the goal of fetching the member ID and email from Memberstack, and then sending this information to Airtable. Unfortunately, I’ve hit a roadblock and haven’t been successful so far.
I’m reaching out to the community in hopes of finding a solution. If anyone has insights, suggestions, or expertise in achieving this, I’d be incredibly grateful for your assistance. Thank you so much in advance!!
Hi Yuvraj,
Where are you stuck? In MemberStack the member ID and email are accessible in the member object-
Your CMS ID comes from the CMS slug.
All 3 get collected and submitted to a receiving endpoint somewhere, most likely on Make or Zapier, and then automation-fed into Airtable.
Yes, I do these sorts of things regularly.
Unfortunately, Michael’s previous comment is misleading. It appears he’s not familiar with using Memberstack based on his statements.
Instead, here’s how to be successful…
Associating Memberstack to Webflow
With Memberstack integrated into your Webflow site, it’s really easy to get the member ID and email address on the front end (client side) via Javascript:
<script>
window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
if (member) {
// access email using: member.auth.email
// access id using: member.id
// access custom fields using: member.customFields["your_field_name"]
console.log(member)
} else {
console.log("not logged in")
}
})
</script>
But that’s not what you need to do.
Skip that.
Instead, just add the Webflow info into a Memberstack members metadata:
<script>
// Get current member's JSON
let memberJson = await window.$memberstackDom.getMemberJSON();
// Modify or add new data
memberJson.name = "Chris Drit";
memberJson.itemID = "ed5trg3eds4rgfr";
// Update member's JSON
await window.$memberstackDom.updateMemberJSON({json: memberJson});
</script>
The Webflow data most likely comes from your CMS and the Collection template page, though I’m not sure how you’ve structured things, but this the most obvious guess. If so, the “+ Add Field” button is your friend:
Now your Memberstack member is associated with that design component.
Example Setup with Walk Through
You can see that in action with Memberstack v1 (easy to convert to v2) with this demo site of mine: https://online-course-demo-shared.webflow.io
Click the enroll now button, add a fake email, and use the lesson “completed” feature. It’s doing everything you need. Creating, reading, updating, etc… a Memberstack members metadata.
If this works for you, you can find the setup and example code in this step-by-step screencast of mine (it’s what walks you through building that demo):
Airtable
At this point, you can streamline and totally skip Airtable if you want.
You’re successfully tracking the association between Memberstack and Webflow.
That said, you may want to still use Airtable just for an easy visual of that tracking.
You have a couple of approaches, but the simplest is the one I’m going to cover here.
Just use the combination of Memberstack & Airtable Webhooks.
In this example, you can totally skip using Zapier, no need for it (unless you have other requirements you haven’t mentioned).
Airtable is awesome in that they have their own Webhook endpoints and you can submit info to it. Automatically adding that info into an Airtable base.
Here’s a tutorial walking through how to do that:
(skip the “form submission” in that tutorial and replace it with what I walk through below)
And Memberstack is awesome in that they have Webhooks you can send to Airtable based upon some event. In this case, the user updated Webhook:
So the flow is…
- Grab component design info from your Webflow template page.
- Insert that into the currently logged in members metadata.
- That triggers a Memberstack Webhook.
- The Memberstack Webhook sends that info directly into Airtable.
This is a VERY high-level walk through leaving out a ton of small challenges you’ll need to tackle on your own.
But, based on my experience, this is the general direction to go with for a bunch of different, and really good reasons.
Good luck!