Skip to main content

Starts at 0:04, after the intro.

Lesson 7 of 8 · 3:21 · Intermediate · Webflow

Win back cancelled members

Show cancelled members a banner that brings them back to a plan.

Where this fits

Pausing helps members who are still here. For those who’ve already cancelled, a friendly banner can bring them back.

By the end of this lesson you can

  • Show a banner only to members whose plan is cancelled
  • Fill in their name, plan and cancel date automatically
  • Show a reactivate or renew button depending on when the plan ends
  • Let members dismiss it for 7 days

Lesson notes

How it works

How the banner finds cancelled members

MemberScript #227 reads the logged-in member's plan connections. It treats a plan as cancelled when its status is cancelled (or expired, past due or unpaid), and as a scheduled cancel when the plan is still active but set to end on a future date. By default the banner stays hidden if the member still has another active paid plan, so you never nag a paying member.

When it shows the banner, it fills in the member's first name (from the first-name custom field), the plan name and the cancel date.

Two kinds of cancelled, two buttons

A member whose plan ends in the future still has access until that date. They can undo the cancellation in the Stripe customer portal by clicking Renew, with no new payment details. So their button is data-ms-action="customer-portal", labelled something like Reactivate my plan.

A member whose plan has already ended needs to buy again. Their button uses data-ms-price:add with the plan's price ID, which starts checkout for that plan, or you can link to your pricing page. Saved payment details mean it only takes a few clicks. The script works out which button to show, as long as each one also has data-ms-reactivate="button": it treats a customer-portal button as the scheduled one and a data-ms-price:add button as the cancelled one.

Build the banner

Paste MemberScript #227 into the page or site body code.

  1. Build a banner, set it to display none, and add data-ms-reactivate="banner". The script shows it when it should.
  2. In the text, add spans with data-ms-reactivate="first-name", data-ms-reactivate="plan-name" and data-ms-reactivate="cancelled-date".
  3. Add the renew button with data-ms-price:add="prc_..." and the reactivate button with data-ms-action="customer-portal". Give both data-ms-reactivate="button" so the script can switch between them.
  4. Add a Maybe later button with data-ms-reactivate="dismiss". It saves dismissed_until in the member's JSON under reactivation_banner, hiding the banner for 7 days (change it with ms-reactivate-dismiss-days).
  5. Test with a member whose plan is set to cancel later, then cancel it now and refresh.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: To finish, you’ll test changes to your pages to see what actually gets more sign-ups.

Chapters

Common questions

How can a member reactivate a plan they cancelled?

If it hasn't ended yet, they open the Stripe customer portal and click Renew, with no new payment details. If it has ended, they buy the plan again through checkout.

How long does Maybe later hide the reactivation banner?

Seven days by default. The script saves the date in the member's JSON, and you can change the number of days with ms-reactivate-dismiss-days.

Will members who are still paying see the banner?

No. By default the script hides it if the member has any active paid plan.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    My name from Memberstack here, and welcome to Memberstack script 227. In this video, I’m going to show you how to build a reactivation banner for users that have recently canceled their plans. >> >> So, what they’ll be able to see is, "Hey, welcome back. Your plan has recently been canceled on a specific date." >> >> They can then reactivate my plan or click the maybe later button, which will add an object in their member JSON. So, this banner will not be visible for a period of 7 days. So, once I click the reactivate my plan

  2. 0:30

    button, I will then be able to go to my Stripe customer portal page. And this is for when a user’s plan cancels in a specific date in the future. If a user’s plan has been canceled immediately, so if I go to simulate that and cancel this plan now, and then refresh the page, so what a user now will see is the renew plan button. >> >> So, if a user’s plan cancels in the future, they’ll see the reactivate my

  3. 1:00

    plan button. If it cancels today, they’ll see the renew plan button. Okay, let me show you how to set all of this up inside of Webflow. So, in Webflow, you are going to need to add Memberstack 227, and it should look like this. If you’re watching this on YouTube, the link to that code should be in the description below. And if you’re watching this on the Memberstack site, then you should have already seen the code. You can either add this site-wide on a specific page, depending on your specific use case.

  4. 1:30

    So, on the page itself, you are now going to build your reactivation banner. The banner itself is going to be set to display none by default, and then the script will handle visibility. And then the attribute on the banner is going to be data-ms-reactivate-banner. Within the banner, you are going to have three more attributes that add dynamic text to this paragraph over here. So, a user’s name will have the attribute of data-ms-reactivate set the first name, the plan name will have the attribute of

  5. 2:02

    data msreactivate, set the plan name, and then the date will have the attribute of data msreactivate set to cancel date. So, for your buttons, our renew button, which will be the button a user will see when their plan has already been canceled, like fully canceled, you can either add the attribute of data mspriceadd, which will allow them to add a new plan, or you can direct them to the pricing page. And then the next button will be your reactivate my plan button. This is the button a user will see when

  6. 2:34

    their plan cancels on another date in the future. So, for instance, my plan cancels in the future, so that will be on the 22nd of June. So, this button will lead to the Stripe customer portal page, and that will have the attribute of data msaction customer portal. And then finally, your dismiss button will have the attribute of data msreactivate set to dismiss. And that is it. So, once you’ve set all of this up, you now have a way to show users um a reactivation banner just so they can

  7. 3:05

    react their plan. If you have any questions on how to set this up, please feel free to reach out in the Stripe 2.0 channel. Bye.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.