Building a social network in Wix part four guys. Are you excited? I hope you are. I know this has been heavily requested. Let me start by apologizing. I told you guys that I'd be uploading this series once a week. And coming back to college has prohibited me a little bit with some time constraints of getting back to classes, moving in a extracurricular organizations, all that fun stuff. So I apologize right off the bat for that.
What I will tell you is that I'm going to work my hardest to get this next part for each new part of this building is social network in Wix series out as fast as possible, you can count on at least two a month to come out. So you can at least count on, you know, part five part six to come out between now and October. So, so we can move on from that.
Next thing is if you've been following along with me I've been still sending out my weekly emails each week. You can get there from wixtrainingacademy.com you can go to the blog, get started, signup on the email list, but you're going to need to be here anyway, because this is where you're going to access some of the code for today's video.
Creating A Custom Registration Box
So in today's video, we're going to work on creating the registration box for our social network in Wix we're going to keep it very simple. We still have to build out our user statuses for our profile pages and still build out those profile pages. But an important aspect to social network is actually having that registration login. I wrote that registration page and also login. We're going to do login on a separate video where we're going to focus on and that'll be in the next part where we're going to focus on login and user statuses. So that's going to be a longer series video in that one. So make sure you're aware to has set aside some time for that next part of our series, but for today, we're going to work on just the registration portion.
So to access our code in the video that we're going to utilize, which I've created a couple of videos on my YouTube channel just recently about these topics. You're going to come here to wixtrainingacademy.com link in the description below. And if you're already a member on there first, congratulations, thumbs up to that. In fact, subscribe down below on YouTube. If you're already a member of the Wix Training Academy and you click log in and that will prompt you to log in.
However, if you're not one of our awesome members in the community yet hit Academy and go ahead and register for the Wix Training Academy, because you're going to find the code we use in today's video. Today's video on the other side of this registration lightbox.
So I am a member, obviously, hopefully I would be. And I'm going to go ahead and log in and show you how to access the code from today's video. So that way you can follow along completely. Let's see, probably typed my password wrong. Okay, there we go. So now we are redirected to the Wix Training Academy dashboard guys, feel free to go through here. You got a roadmap, a library full of webinars, courses, resources full of checklists courses, everything.
By the way, the part four checklist will be on this resources page for this series, the masterminds community, all that good stuff, but to access the code snippets, we scroll down a little bit to this right side and click code snippets. And today we are going to be used a lot utilizing this custom registration lightbox code. We're going to press get code, and then we'd simply copy it from here and paste it into where I show you when we need it but enough on that for the moment that's how you access the code. Let's hop into our social network website.
So I went ahead and marked this as homepage since we don't have any content on it yet. And I also marked a task testing page that we're going to use to utilize our whole registration process in this video. So guys, when building a registration page or lightbox, you can choose one of those two methods. They require the same page code, and you're going to use the same fields, but one is a page. Some of you may have a more interactive social network that you want to take them through a whole page.
Personally, I know you guys, my audience that watches my stuff just wants to access that content as quick as possible. So I just have a simple lightbox pops up, they log in and then they access to Wix Training Academy. It doesn't really matter. It comes down to preference and what you feel is going to be best for your audience in this video, I'm going to show you the lightbox method, because that's the one I personally like to use. But again, if you want to go ahead and worry about designing a, an actual login or registration page, go for that.
Now for this in particular tutorial, we're going to be registering the user's email and password. It's going to be very simple. We may go back and actually add some more details, like post registration. So right after they registered take them to a registration page where they can put their first name, all that good stuff, we'll actually build out their profile. I haven't decided how we're going to go about doing that. As I said, you guys are along with me, I'm building this social network from scratch. So things can change on a dime. I'm kind of picturing like, okay, we need this, we need this, we need this. And then if I do decide, okay, this is a big change. I'll throw it in one of the parts of this series. So that way you can see how we go about changing and executing that.
So we have our homepage here. I went ahead and created our lightbox already and I called it registration lightbox. It's right here. I built it out. It's very easy to do, to add a light box. Guys, you go over here to add you scroll down to lightbox. I started this lightbox right here. You click that. You click on here. One of the big things you’re going to do is when you click on the light box, go to the settings and make sure automatically display on lightbox pages is no.
So that way, as soon as someone hits your website, the lightbox doesn't automatically pop up. But instead, someone actually asked to click a button, so maybe register and then it'll pop up. So it'll be on click. So when something happens on click, the functional, be carried out, open the lightbox, simple as that.
And then I just dragged in a picture. I created a blue box here, just wrote register. And then this is where we get into the details now. So that code from the Wix Training Academy, you're going to want to copy that and paste that I have already pasted it here. Let me explain to you how this works. What we need here is we need to actually go in here and set our fields. So I'm going to go ahead and delete these and show you how we go ahead and do that.
So we need two fields. We need our email field and our password field to do that. You're going to come in here to add, you're going to go to user input. You can choose which one of these texts inputs you want. I'm just going to click this one, going to drag it down, obviously centered a little bit, and then I'm going to copy it and paste it.
And then we also need a button for the register now button. So that way, as soon as they click that the information is submitted to the Wix CRM and they are officially a registered site member. So we'll just come down here to button and we'll click this button right here. Simple as that, add it.
Now, what we need to do is we actually have to edit the settings for this field. So we'll come into this first field click settings, and we want to type to be email because we want it to come through in an email format because that's what has to be submitted into the Wix CRM in email format. And then we're going to change the placeholder text to email. Then we're going to change the settings for this one.
And we want the type to be password. This is in case someone's watching over your shoulder or something like that. It creates those black little radio buttons. Each time you put in a new letter. So that way it keeps your password secret and protected. And we're just going to put password right here. And those two are required fields. And then right here, we're just going to name this register.
Now, now what we need to do is we need to start correlating these three fields with the code. So if you see right here, I would follow the names that I have used in my code. So that way you can just simply fall along in these are the IDs that I would recommend using because it keeps everything pretty neat and pretty straightforward. So what we need to do is we need to assign an ID to each of these three fields. Why?
Because as you can see in the code right here, when this button, which the ID needs to be changed to register now is clicked, it needs to know what that register now ID is correlating to. So we're going to change the button to register now. And then bam, just like that. We've got our button change to register. Now that correlates right here in the code, you can see our error disappeared for that. You now see there's an error right here for registered email and an error right here for registered password.
The reason for that is because the inputs are the field IDs. Don't correlate here with the code IDs. So we need to make sure they both correlate. So email, we're going to go up here going to click email, and then we're going to go over here to our properties panel. And we're going to change it to register email just as it is in the code. And then if we click back down here, you'll see that little red button disappeared from that one because the code now recognizes it correlates with this registered email.
And we're going to do the same exact thing right here for password. We're going to click register password. And if we click back, let's see here, oh, well, let's make sure it's spelled right in our code register password. And now you can see that red dot has disappeared because of correlates. So now let me explain to you a little bit about how this code works.
What happens is essentially what this code is saying, is it imports Wix user so it's importing from the Wix backend. So when this is submitted, it's importing into that. And then the function is, as soon as this button is clicked, as soon as register now, button is clicked on click, let email whatever's in this field dot value and whatever's in password, field dot value, register, Wix users dot register, register, and account as a site member. And then once they've been registered, take them to wixLocation.to bash slash testing.
In this case, you need to do whatever your page extension is that you're sending them to. So typically for our social network, it's going to be sent to a profile page. However, our profile page is not yet completely built out, which is why partially I'm saving the login whole portion of this video to go with the user statuses and profile page completion, because I want to show you how that works, because right now we're going to keep this testing.
The page extension is testing how we can tell what the page extension is, go to the page you want to look at, go to here to your site, menu testing, go to page SEO, and you'll see it's backslash testing. So that's your page that you're sending them to. Okay. And it is going to be different for each of you. Some of you are going to be sending them to a static page. In this case, we are not, we're going to be sending them to our, we are in this case, we're sending them to the testing page.
However, as soon as our profile pages are built out, I'm going to show you in an update video, how to change this so that it sends them to the correct profile page. We're going to use the current user dot Wix, R which users dot current user.id method. And I'll show you how that works. But at first we're going to use a static page for the purpose of explaining this video. And then as soon as our profile pages are done in built out, which we'll do in our next couple of parts in this series, we'll go ahead and utilize those as well. So we'll send it to testing. And you saw that it was that testing page.
Now we should be able to go ahead and press publish view site as soon as we get it and test this out. So we're here at home. Oh yeah. We obviously have to create a trigger for the lightbox to appear. So let's just, we're going to use a sample piece of text here. Let's just go in here, click this right here, and then we'll just type in register and then we'll link it to the registration lightbox. Just like that. Now, if we click publish and view site, what will happen is we'll click register. It'll prompt our lightbox, share our registration lightbox, and we'll go test@testy.com. And then we'll just go test one, two, three as a password.
Now what should happen here is when I click register, now one, I should get a notification to my phone through the Wix app, which if you don't have it, I recommend you get the Wix app that says there's a new site member in my social network website. And then as soon as that happens, simultaneously, we should be redirected to the testing page. So let's see if that's what happens. Bingo. So we're redirected there and we've got our notification right there that we were just became a member at social network, which is what this is called. And we were redirected to the testing page.
So now this person has officially become a site member of your social network. We'll get into the login details, also building out those status pages and user statuses and profile pages in our next part of this series.
Conclusion
Guys, if this video was help helpful, please throw me a thumbs up. Comment, if you have any questions at all, I know you're probably already all anxious and excited to see part five of this series, which is going to be fun and exciting. But until then, I appreciate your patience thus far. And working with me coming back to college has been fantastic. But it's definitely kept me a little bit more busy than I was in the summer producing these videos each and every week. So I do appreciate your patients.
Subscribe here if you haven't already. And don't forget to head over to the wixtrainingacademy.com. So that way you can access the code we used in today's video. I appreciate all of you. I appreciate what you're doing for this community. And I appreciate you guys being part of my community. We have something special here and it just continues to grow. And I love pushing this content out to you guys. So that way you can continue to develop your skills and talents within Wix.
Once again, I will catch you on our next video, which will be part five of building a social network in Wix. Check that resources page in the Wix Training Academy for the part four checklist that I will upload following this video. Thank you guys very much. And I'll see you on the next one.