Email Verification

Article author
Duncan Hamra

This article will show you how to A) require members to verify their email address during signup, or B) prompt them to verify their email after signup. Here's how to do it...

Enable Email Verification

Navigate to Email Settings in your Memberstack dashboard.

You can use this UI to preview, translate, and brand your emails. Your brand color and logo will be pulled from other areas of the dashboard. 

Global_Settings_Home.png

Require Verification to Access Content

Clone this Webflow project to copy and paste a basic email verification page. 

Click the toggle at the bottom of the Email Settings page to prevent unverified members from accessing gated content. Create a "Please verify your email" page, and enter the page URL into Memberstack. We will redirect all unverified members to this page when they signup or log in. 

verify-email.png

Verification Success Redirect

What happens after a new customer verifies their email? 

By default, Memberstack directs each new customer to their On Signup URL after they verify their email address. You can customize the On Signup URL by updating your default and plan-level redirects.

Note: Memberstack will remove any query parameters from the redirect. e.g. /success?plan=paid-signup

Redesign Verification Email Button

We automatically send a verification message to the address they used to sign up, but they can re-send the verification email if they didn’t receive it. Place the following data attribute on the button: data-ms-action="resend-verification-email".

Prompt Verification After Signup

Clone this Webflow project to copy and paste a verification prompt.

Disable the toggle at the bottom of the Email Settings to allow members regular access to your site.

You can then use the following data attributes to show and hide content from verified or unverified members. 

Use data-ms-content="!verified" to show an element to a member who is NOT verified (picture below).

Pro tip - If you want this element to be hidden by default, you can add the attribute of data-ms-bind:style="display:block" and then hide the element when you're finished designing it. If the member has access, Memberstack will set the element to display block. Learn more → 

Use data-ms-action="resend-verification-email" to allow members to send themselves another verification email (e.g. useful if they create an account several weeks ago).

1500017894921verificationResend514211.png

Note: You can also use data-ms-content="verified" to show an element to a member who IS verified. This feature is less common.

Dashboard

You can check if a member has been verified or not via the dashboard

verification.jpg

White-labelling

You can change the "from" address by following the steps in this guide to while-label emails from Memberstack. 

Webhooks

When a member becomes verified, the member.updated webhook fires.

The reason field will show "verified."

Was this article helpful?

Comments

2 comments

  • Comment author
    Mohamed Ali

    I  get the email confirmation text to my email.  but when I click on the confirm my email then it redirects to same page ( email confirmation page.)

     

    how to solve this?

    0
  • Comment author
    Duncan Hamra

    Hi Mohamed Ali 👋

    Memberstack will use the signup redirect once they click verify. You can set that at the site level or at the plan level

    0

Please sign in to leave a comment.