Example Description
In this example we created a new signup form using a lightbox. In order to complete the registration, site users need to verify their email address.
Note: In order to use this example in your account you first need to create your own triggered email by following these steps:
Open the Business Manager and go to Developer Tools -> Triggered Emails.
Add a new triggered email. The content must contain a dynamic variable named 'URL', for instance add the following text element: 'In order to complete the registration process, click the following link: ${URL}'.
Copy the Email ID of your newly created triggered email and store the value in the Secrets Manager as a new secret with the name 'verification-email-id'.
Copy your site base URL, for example, 'https://www.wix.com/my-username/members-area' and store the value in the Secrets Manager as a new secret with the name 'site-base-url'.
How We Built It
Pages, Lightboxes and Apps
Our site contains the following pages, lighboxes, and apps:
Member Area App: For handling members (we deleted the login bar).
membersLightbox: For registering new members or for signing in current members.
The lightbox contains elements for two forms. One for registering and the other for signing in.
The lightbox is set up to be the default sign up form.
A triggered email that is sent to site visitors who are signing up to verify their email addresses.
Approve page: For validating new member registration.
Home page: This page for members only. Trying to enter this page before signing in triggers the register lightbox.
Code
Our site contains the following code:
membersLightbox: Code for processing a login for a current site member or a registration for a potential site member. This page calls functions from the login.jsw and register.jsw backend web modules to perform logins and registrations. It also calls functions from the checkIfLoggedIn.js file to check if a member is logged in.
login.jsw backend web module: Code for signing site visitors in, starting the registration process, and completing the registration process.
register.jsw: Code for creating a contact for registrants, creating a URL with the token (that is used as a verification link in a triggered email), and sending email verifications.
Approve page: Code for verifying the token in the verification link. If valid, the page redirects to the home page, if not, it displays an error message.
Home page: Code for checking if the current member is logged in. If not logged in, the member’s lightbox opens.
Related Examples
Did this help?
|
Thanks for your feedback!
Send Email with the SendGrid REST Interface
Use the wix-fetch API to send an email using the SendGrid REST API.
Intermediate
Custom Members Area
Create a custom members area
Intermediate
Back in Stock Notification for Site Members
Allow site members to receive a notification when a product is back in stock
Advanced
SendGrid npm Integration
Use SendGrid’s npm module to send emails from your site
Intermediate