One feature that’s very common, especially with SaaS businesses, is having plans which allow multiple users - this way, people who pay can add other, new members to their account.
This is a start-to-finish guide on adding team accounts to your Memberstack + Webflow site.
Note: This guide assumes you already have created a Memberstack app and connected your Stripe account. If you haven’t started your project yet and don’t know how to, please click here to watch the getting started video.
Step 1: Creating a plan
The first thing you’ll need to do is head into the Memberstack dashboard and go to the “Plans” tab on the left-hand side.
Click the “Add plan” button at the top.
Select “Paid plan”, and click “Next”.
You can give your plan a name and description. For this plan, we’re going to call it “2 Seats”, because you will only be able to create prices which will have a maximum of 2 seats - but, yours will likely be something like “Premium - 2 Seats”. Since customers will see the name of this plan at checkout, make sure it makes sense.
⚠️ You can only have ONE seat count, per-plan. You CANNOT make multiple prices and assign a different maximum seat number to each.
Click the toggle to “Enable Team Accounts”, and 2 more fields will appear;
Signup Page URL: This is the page that the team members will be sent to when they click the invite link - so, you’ll likely want it to say something like “You’ve been invited”
Upgrade Page URL: Once a plan owner has reached the full amount of seats, they will see an option to upgrade. When they click that link, it will take them here.
Once your plan has been created, you can click “Add” to create a price.
After you click “Add”, you’ll see this screen - here, you can choose whether you want the plan to be a one-time payment, or recurring. If you choose recurring, you can choose how often you want customers to be re-billed.
👀 You can create multiple prices for the same plan - but, the Maximum number of seats must be the same for all. This way, you can create different prices for options like monthly, yearly, and one-time billing.
⚠️ The Maximum number of seats includes the plan owner - so, if you write 2, they will be able to add one additional team member.
Step 2: Installing your plan
Once you’ve created your price(s), click the “Install & publish” button for your plan. Once you do, you’ll see this popup which has the attributes you need, plus a handy video showing you exactly how to install plans in detail.
Once you’re done doing this, repeat the process for every new plan you want to make - and don’t forget, a new plan is needed for each new number of seats (for example, “Premium 2 Seats, Premium 3 Seats, and Premium 5 Seats).
How it works
For plan owners
Once you have a customer who has paid for a team plan, everything is managed through the profile modal.
Once they open their profile modal, they will see a “Team” tab. This tab shows the invite link, along with a list of team members.
⚠️ To invite team members, the owner must send them the invite link. If they already have an account, they will be added to the plan when they click the link. If they don’t have an account yet, they will need to create one, and then it will add them to the plan.
Inviting team members
To invite team members, plan owners must open the profile modal to copy the invite link.
When the invited member clicks on the link, one of 2 things will happen;
If member is already logged in: An alert box will pop up to let them know they have been added to the team.
If the member is not logged in: If they log in or sign up on this page, their new account will be added to the team upon creation.
Managing team members
In the “Team” tab of the profile modal, plan owners can view and remove their team members. Along with that, if all seats have been used, they can click to go to the upgrade page.
Comments
14 comments
I've been looking for the profile modal with the team section in the components but can't find it - any help on where I can find this?
Thanks
Hey Charles Bradford 👋 We don't have any Webflow attributes for team accounts yet. That's something that Tyler Bell and I will need to chat about.
We may also release a version of the profile modal (data-ms-modal="team-profile") which only displays the team section.
What's the ideal solution for your project?
thanks for getting back to me Duncan from Memberstack,
I'm just trying to find out how to send the invite codes and display the current team members as per the below:
if there is not yet a pre-made element that's cool, but if I could find out how to get the share URL, display the number of seats taken, and show who the team members are that would be helpful
I just talked this over with Tyler and it's not likely we'll add attributes for this just yet. Which means you'll need to continue relying on the pre-built profile UI for now.
Members can open that modal with the attribute data-ms-modal="profile"
thanks for your help duncan - I'm getting there with my setup.
I have a quick question about the UUID of the teams, I'm trying to set up some webhooks so that when members are in the same team I add the UUID of the team to a database. I can't seem to find it in any of the outputs of the JSON - am I missing something or has this not been added to the payload
Hello Duncan from Memberstack
Can we translate this modal in another language ?
Thanks
William de Broucker, you cannot, but we will get that fixed.
I've flagged this to the team.
thanks
Charles Bradford Just saw your message! I will check with Tyler Bell and let you know 👍
Duncan from Memberstack I'm just catching up on this new option. Since I've created a little bit of a hacky solution to accomplish this and have been using it for a while it would be great to switch to this option. However, I also stopped using the profile modals. So for me, what you mentioned here would be an ideal situation:
That would allow me to keep my current custom profile pages in webflow but then perhaps I can add a link or a button to launch just the teams tab for the profile.
Do you think that would be possible? Kind of a good compromise before jumping into creating a whole new set of attributes.
Hello Duncan from Memberstack,
Will this feature be available for free plans ?
William de Broucker We are open to it, but right now it's only for paid members.
I'm trying to use this with webhooks to allow access to other apis on our backend, however there doesn't seem to be any event logs around a team admin adding/removing team members to their team plan?
Can this be added??
agree with Christopher Kerry, including the joinedTeams in the memberCreated webhook is a must
Please sign in to leave a comment.