By default, Memberstack requires a credit card when purchasing a paid plan with a free trial.
If you'd like to grant member's a free trial without collecting payment information we've created a code solution for you. In summary, we'll be using free plans to grant access to content and then using a bit of code to remove the free plan after a certain number of days.
1) Require a Trial on Signup
1. First, create a free plan and use it to grant access to gated content.
2. Second, add the data-ms-plan:add="Your_Plan_ID" attribute to your sign up form.
3. Third, create a "/wecome" page and set your On Signup redirect so that new members land here after creating an account. Add this code snippet before the closing </body> tag. This code is setting the trial expiration date in hours. So be sure to update the default 240 (or 10-days) to equal you desired trial length.
<!-- 💙 MEMBERSCRIPT #27 v0.1 💙 SET ONE TIME DATE -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
const memberstack = window.$memberstackDom;
const updateDate = async function() {
const member = await memberstack.getMemberJSON();
if (!member.data) {
member.data = {};
}
if (!member.data['free-trial-date']) {
const currentTime = new Date();
const expirationTime = new Date(currentTime.getTime() + (240 * 60 * 60 * 1000)); // Set the expiration time to 10 days (adjust as needed)
member.data['free-trial-date'] = expirationTime.toISOString();
// Update member JSON
await memberstack.updateMemberJSON({
json: member.data
});
}
};
updateDate();
});
</script>
4. Then, add this code snippet before the closing </body> tag of any page with Members Only content. This code will check the expiration date and automatically remove the free plan once the date has passed.
<!-- 💙 MEMBERSCRIPT #37 v0.1 💙 MAKE FREE TRIAL EXPIRE AFTER SET TIME -->
<script>
let memberPlanId = "Your_pln_ID"; // replace with your actual FREE plan ID
document.addEventListener("DOMContentLoaded", async function() {
const memberstack = window.$memberstackDom;
// Fetch the member's data
const member = await memberstack.getMemberJSON();
// Fetch the member's planConnections from local storage
const memberDataFromLocalStorage = JSON.parse(localStorage.getItem('_ms-mem'));
const planConnections = memberDataFromLocalStorage.planConnections;
// Check if the member has x plan
let hasPlan = false;
if (planConnections) {
hasPlan = planConnections.some(planConnection => planConnection.planId === memberPlanId);
}
if (hasPlan) {
// Check the members free-trial-date
let currentDate = new Date();
let oneTimeDate = new Date(member.data['free-trial-date']);
if (currentDate > oneTimeDate) {
// If the members' one time date has passed, remove x plan
memberstack.removePlan({
planId: memberPlanId
}).then(() => {
// Redirect to /free-trial-expired
window.location.href = "/free-trial-expired";
}).catch(error => {
// Handle error
});
}
}
});
</script>
5. Finally, create a "/free-trial-expired" page. Members will land on this page if they log in after their trial has expired.
2) Begin Trial Anytime
Note: Only implement Option A or Option B. Do not try to setup both.
1. First, create a free plan and use it to grant access to gated content.
2. Second, add the data-ms-plan:add="Your_Plan_ID" attribute to a button on your site. This can be before or after your sign up form.
3. Third, create a "/wecome" page and set your On Signup redirect so that new members land here after joining the plan. Add this code snippet before the closing </body> tag. This code is setting the trial expiration date in hours. So be sure to update the default 240 (or 10-days) to equal you desired trial length.
<!-- 💙 MEMBERSCRIPT #27 v0.1 💙 SET ONE TIME DATE -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
const memberstack = window.$memberstackDom;
const updateDate = async function() {
const member = await memberstack.getMemberJSON();
if (!member.data) {
member.data = {};
}
if (!member.data['free-trial-date']) {
const currentTime = new Date();
const expirationTime = new Date(currentTime.getTime() + (240 * 60 * 60 * 1000)); // Set the expiration time to 10 days (adjust as needed)
member.data['free-trial-date'] = expirationTime.toISOString();
// Update member JSON
await memberstack.updateMemberJSON({
json: member.data
});
}
};
updateDate();
});
</script>
4. Then, add this code snippet before the closing </body> tag of any page with Members Only content. This code will check the expiration date and automatically remove the free plan once the date has passed.
<!-- 💙 MEMBERSCRIPT #37 v0.1 💙 MAKE FREE TRIAL EXPIRE AFTER SET TIME -->
<script>
let memberPlanId = "Your_pln_ID"; // replace with your actual FREE plan ID
document.addEventListener("DOMContentLoaded", async function() {
const memberstack = window.$memberstackDom;
// Fetch the member's data
const member = await memberstack.getMemberJSON();
// Fetch the member's planConnections from local storage
const memberDataFromLocalStorage = JSON.parse(localStorage.getItem('_ms-mem'));
const planConnections = memberDataFromLocalStorage.planConnections;
// Check if the member has x plan
let hasPlan = false;
if (planConnections) {
hasPlan = planConnections.some(planConnection => planConnection.planId === memberPlanId);
}
if (hasPlan) {
// Check the members free-trial-date
let currentDate = new Date();
let oneTimeDate = new Date(member.data['free-trial-date']);
if (currentDate > oneTimeDate) {
// If the members' one time date has passed, remove x plan
memberstack.removePlan({
planId: memberPlanId
}).then(() => {
// Redirect to /free-trial-expired
window.location.href = "/free-trial-expired";
}).catch(error => {
// Handle error
});
}
}
});
</script>
5. Finally, create a "/free-trial-expired" page. Members will land on this page if they log in after their trial has expired.
3) Known Limitations
The free plan will only be removed IF the members logs in after the trial has ended. If the member does not return, then it will appear they are still trialing. This can create some issues if you are tracking the number of active trialing accounts.
Comments
10 comments
I cant seem to make this work?
Hey Holly Smyth 👋 Can you share a link to your website? Or maybe a video explaining what's going wrong? I'll do my best to help.
Thanks Duncan, when a user joins on this link https://www.absolutetuition.co.uk/free-trial it gives them the correct json however it does not send them to update member now which is this page https://www.absolutetuition.co.uk/free-trial-expired .. I have used the correct code let me know if you need anything more from me
Holly Smyth where did you put the code? And do you have a test mode version of the site I could try out? something like https://absolutetuition.webflow.io/
Thanks Duncan I put the code in the before body tag. It creates a Json on memeber stack but does not update when they should be redirected to free-trial-expired.
https://absolute-tuition.webflow.io/free-trial
I think I found the issue 🎉
1.5min video with some ideas: https://www.loom.com/share/a8aeca405a7b407c99454bcff6d00828
Thank you Duncan and memberstack!
Hey Duncan, sorry to be a pain.. it is still not pushing to get to the free trial expired page?
You're suuuuper close! Last thing is to add your free plan ID where it says Your_Plan_ID
Thanks so much, Duncan! This was super helpful.
Please sign in to leave a comment.