How to Create a Members-only Blog on HubSpot

Alrighty.

So I just want to first off say thank you to everybody who has come here today to join us to learn about what we're going to present to you guys. My name is AJ laporte. My pronouns are he and him. I have the orange background behind me and I'm wearing the black T shirt. And what you probably can't see because I'm kind of short is I have a HubSpot logo on my shirt. John, do you want to go ahead and introduce yourself?

Yeah. Hi, I'm John McLaren. He, him, pronouns. I'm wearing a black shirt as well, and on my shirt is HubSpot Sprocket surrounded by curly braces. Call back to Hubble. Behind me is the HubSpot logo and I work on a lot of our developer education content. Whether you've visually seen me or not, if it affects CMS devs, I've probably been a part of it to some degree. Now I'll throw it back to A.J.

All righty, so today we're gonna talk about creating a membership based blog with Marketing Hub and CMS Hub. As we said before, if you have any questions along the way during our presentation, feel free to drop them as a comment in the chat or better off as in the Q and section there. We'll do our best to answer them as we move along, but we also will have some time at the end for Q and A as well to address any questions that come in. So before we dive in, let's kick this off first by explaining what the membership feature is. So memberships on CMS Hub give you the ability to create gated content similar to that of password protected pages that require users to log in to view your site and to view the content. Memberships on HubSpot are powered by our Contact Lists feature within the CRM. This means you can create multiple lists for contacts to be added to, then assign those lists to certain pages or blogs, allowing those contacts to access the gated content. An example would be creating multiple lists for membership levels and then allowing each level access to its own tier of content. The unique advantage of using lists to control content access is that you can also reuse those same lists in your email campaigns and within our workflow tooling. Okay, now that we've covered what memberships are from a high level, let's dive into what we should know before creating a membership based blog and then we'll discuss what we'll be covering today. You should have a basic understanding of the following features and areas. First is the settings area within HubSpot, in particular the website and blog settings area. Next, you should also be familiar with templates, themes, modules, menus, pages and blogs. I know a lot of that sounds scary. It's not, don't worry. You should also be familiar with CRM contacts and lists within HubSpot. Lastly, Hubble, which is HubSpot's extension of Gin Java, and Gin Java is a templating language based on Jinja. It's good to note that Hubble uses a fair amount of markup that's unique to HubSpot, and we don't support all of the features of Jinja. Now let's review what we're going to be covering today. First, we'll review how to enable memberships with self registration. Then we'll review where to go to assign pages for user destinations, such as when someone logs in, setting emails that users receive, and assigning templates to system level pages. After that we'll cover how to set a blog to members only. And last, we'll cover how to build a site header that adapts to the user's logged in state. All right, so here we are in our portal. So let's begin with enabling memberships with self registration. We're going to start by going up to our settings area, which is this little cog wheel between the marketplace icon and the notification bell on the left sidebar. Here we're going to scroll all the way down to the website section and to the private content item. Before we can enable self registration, we have to choose our appropriate domain in the top area where it says choose a domain to edit. So in this instance it's going to be members built on HubSpot.com so next we're going to scroll down a little bit and you can see this checkbox here. This is the checkbox that used for enabling self registration. Now it's quick to note that this is not checked off by default, so you want to make sure to check that box and you should see a success message pop up that lets you know that your settings were saved. You'll also notice that when you do check this, a section for consent to process data appears. This allows you to set custom text for the message that is shown on the registration page and informs users that in order to sign up we need to store and process their personal data. We have now successfully enabled memberships with with self registration for our site. So let's shift to assigning pages for user destinations. So if we scroll a little bit further down on our general tab here, you'll see that we have our destination section. This is where we're going to set pages for users after they register for our site, sign into our site and sign out of our site. As you can see, we've already assigned some pages in this area that we've previously created. Now if we move to the next section down, you'll see where we can set specific emails for registration invitation, which is the email sent to contacts who have been invited to access private content Password confirmation, which is the email sent to users confirming their new password was saved and password reset, which naturally is the email a user gets when they reset their password. Now if we scroll back up and flip to our templates tab, this is where we'll set our default system level templates for registration, sign in and sign out and password reset functionality. Assigning these items is similar to how we set the pages for the user destinations. The only difference here is you are assigning templates and not individual pages themselves. As you can see, for the purpose of our demo, we've opted to stay with the default templates that are provided. Alrighty. Now that we've enabled memberships, we've set up our pages and templates. The last bit we need to do is set our blog to be a members only blog. Good news. Like I said, this isn't overly complicated and can be enabled straight from the blog settings area. If we look at the left hand pane again under the same website settings group, we'll see blog. So we're going to go ahead and click there. Now for some of you, you may have multiple blogs to your portal. We want to make sure that we're choosing the appropriate blog from the current view dropdown, which we are in this instance. So we'll go ahead and we're going to scroll to the bottom of this page and here we're going to see this Control audience access area. And then we have our little button down here for private registration required. So we're going to go ahead and click that radio button for private registration and then we're going to go ahead and from our dropdown here, we're going to choose the lists for those that get access to this blog. So here's a quick tip for you. When you're setting up your lists, there's two fields that you can use when you create your lists for private registration, field number one is registered at and that is a timestamp that indicates when a user has successfully registered for your site. That means they have filled in the signup form, they've created a password, they are a full user. The second field is the time the registration email was sent and that field is also a timestamp, but that indicates when the user received the email in order to set up their membership. So they're not quite fully a member yet, but they are in the process because they've received that email. So you can use those two fields when creating your membership access list and also for lists indicating users who were invited but have not fully registered. So now I'm going to hand it over to John who's going to show you something amazing and that's how you can build a site header that adapts to the user's logged in state. So go ahead John, and take it away. I'm going to go ahead and stop sharing my screen. Is that okay John?

Yes, absolutely.

All right.

The hype there. Well, thank you. Thank you, A.J. now that you have your system template set up and blog restricted, there's a couple of things you probably want to do. As AJ noted, you might want to make that logged in experience if your members feel familiar but different from the public side of your site. And one way to do that is through having a navigation menu that adapts. Another thing that you probably want to do, you have this new blog. You probably want to create a landing page promoting your new exclusive members only blog and on that page have a form so that they can request access to that blog first. We'll get into making that logged in experience feel familiar. A tip that you should know is that all of your site templates and modules that you use on your public pages of your site are fair game to use within the memberships only section of your site. And the content editor experience is the same across the board. You can think of a membership think of a membership based site that you have personally used. That's any website that you log into from your financial accounts, social accounts, web apps and other services. What are some of the immediate features or details you'd expect from any of these websites? Logged in experiences. I'll give you a moment to answer in the chat or re ask the question. What are some of the immediate features or details you'd expect from any of these websites? Logged in experiences Personalization Profile Link count info Perfect. Logout. Yep, yep. You got to be able to log out content. Sweet. You guys are hitting everything. So just kind of restating a little bit of what you guys decide. But one of them is your navigation menu is different from the public side of the website. There's often a settings page to update your information and change Communication preferences and the experience generally gets more personalized to you. So we're going to implement some of that now and we'll start by creating a menu that adapts to whether the member is logged in or not. We don't need to build a menu module from scratch. We're actually going to modify the boilerplate menu module. Let me just share my screen. All right, so I have the menu module open in VS code. This is the exact one from the HubSpot boilerplate and I have my screen zoomed in. But if you have any trouble seeing we will be dropping a link in the chat to a blog post that went out recently explaining a lot of this post includes the code and the steps that I'm taking so that you can follow along. Additionally, all of the code shown today is available in a GitHub repository link is in the chat. Hopefully the Link for that GitHub repository is also in the blog post in case we just link that out. So I already have the CLI open and set up to watch my module for changes. First we're going to add a new Boolean field to the module. So I'm going to go over to my fields JSON and so right under this menu field I'm going to add and just for a little side note, I have the HubSpot VS code extension installed. So all I need to do to add a new Boolean field is type field boolean, hit tab and there we go. I have all the code expanded out and let me just fix this small syntax issue. There we go. All right, and we're going to name this field. So this field is that content creators can turn on or off the memberships features we're going to add. This is important since you might need to use this menu module in a bunch of different places on your site and it may not be relevant to always have membership based links. So we're going to name this display membership venues. All right. Now this field might not be outright obvious to the content creator what it's going to do, so I'm going to add some inline help and inline help text always shows does not require the the content creator to mouse over the little tooltip icon. And so we're just gonna be very clear and state that links that will appear in the main navigation when logged in or logged out. And I apologize ahead of time here that my my keyboard is a mechanical keyboard. I love it but when you're watching this it might get annoying. So deal with it. So we're going to add a Group. Now, actually, before we do that, let's jump back into our module HTML. We're going to add an if statement that actually uses that new field that we just added. So underneath menu items, we're going to add if. And if I make any typos, feel free to make fun of me in the chat, I will ignore it. So module dot display, membership menus, and we'll add an end if. All right, so if the content creator enabled the field, we're gonna do something. And if they don't, we're not going to do that thing. So what we're going to do now is jump back to our fields JSON, we're going to add a group. And again, group dot group can just hit tab. And now we can expand it out and we have a group. Ignore the syntax highlight or the like indentation. If you open up the blog post and you go to the code there, the code is properly formatted for you. I'm just not bothering for the sake of your time in this demo. All right, so let me name this group, we will name this membership menus. All right, And now we're going to go into the children and we're going to add two menu fields. So field dot menu, hit tab. There we go, we have a menu field. And actually, let me save this just so that you guys can actually see what's happening. I'll save this as well. And again, I just have the CLI open with the watch command enabled. So if I open up the module preview, you can now see that I have display membership menus. And then I have this group here and there's a menu field. All right, jumping back to the code, we're going to name the first menu. We're gonna call it logged in menu. All right. And set the label so the content creator knows. Cool. All right, now we actually just need another one of these menus we will copy and paste. And we're going to change this to logged out. And I will save again. So you can see. And there we go. Logged in, logged out. All right, now, now that we have these, we're going to go back into the HTML and we're going to use those two different menus to determine which menu we're going to show based on if the user is logged in or logged out. So just to make it clear, we have three different menus that we're using. We have the main menu. This will show regardless of the user being logged in or logged out. Then we have two different menus here that will conditionally show based on if they're logged in or logged out. Now we're going to add another if statement, if request contact that I believe it's just is logged in. Create variable name. All right, now we're gonna add an else because we need to show a menu based on. If the user is logged in and logged out. So if. There we go. All right, so if the user is logged in, we're going to display a menu. Now this will make sense in a moment, but we're going to copy the menu items here. All right, and now what we need to do is we actually need to add the to the parameter. We're going to add the new menu module fields so that we can get the IDs for the menus. So the new fields are module.membership venues. Logged in menu. And then we're going to add the same. But do logged out. Let me copy and paste this. Logged out. Perfect. Now this isn't going to do anything yet. It'll make sense in a moment. And then we also need to add another, another field here. This will be module menu. And all that is is just this first one. First menu field. All right, now we're gonna actually make this do something. So this macro that exists in this module already is going to work perfect for what we need to do. This renders out all of the menu link items and all that we need to do is tweak the menu items macro slightly so that it takes an id. So we're going to change this to menu id. All right, and then we're going to change this to menu ID as well. All right, now that I have that saved, let me make sure that I saved this and no errors in the coi. All right, let me select a couple of menus here. So little cooking show magic. I already created menus here, but I will explain them in just a second. So there we go. This is what will show when you are not logged in. It'll show a login link. All right, now let me show you the advanced menus. So again we have our menu that is. Well, first let me show you the static one. So the main nav would be just the links that you want everyone to see. This might be your homepage, your about us, contact us kind of ideal. But then where things are interesting is we have this logged in menu. So the logged in menu is where we're going to link to that blog that's members only. That's what we're doing right here for announcements. And then this is something you've probably never seen before. But this is some Hubble dropped into a menu link. And what we're actually doing is this will create a dropdown that will display a my account, my tickets and a logout link for the user. And so that my account page you can have like user preferences, a form to add more information, etc. My tickets. Perfect use case for this is if you use customer portal, you can just link out to that. All right, and by the way, if you didn't know, Customer portal menu, the menu that shows in the top bar for customer portal now shows up in advanced menu. So you can customize it. All right, now let's talk about that logged out menu. All we care about in this instance is that you have a way to log in. Something though that I didn't mention for logged in and for logged out. Something you may care about is say the pricing page on your website. It may not make sense to display the same pricing page to someone who is logged in and already potentially paying money for your services as the same as you'd show someone who's never subscribed to anything. Just, just food for thought there. All right, let me show you an actual page that is using this right now. All right, so if I refresh now, this is an incognito window. I am not logged in. And so as you can see, my login link is appearing in my main nav. And then when I am logged in, you see this and I can hover over this. This is the my account link, my tickets and log out. All right, so, and just for clarity, this is the HubSpot boilerplate. We wanted you to be able to see exactly how to implement this so there's no fluff added to it. All right, now let's get into the membership blog bit again. All right, so you probably want to create a landing page that people can subscribe to your new blog. Well, we're going to create a new page and I've already done a little bit of it for us here. All I did was updated the text. This is the exact landing page boilerplate template. There's nothing different about it. Now the other thing that I did ahead of time was I created this form, but I'm going to show you this form. We're going to go into the full forms editor. So this form is what's going to make it so that people have access to your blog. There's nothing actually that fancy about the form itself. There's only a couple of things that are actually required for the user to fill out. So email is one of them. We needed to be able to associate this submission to that contact so that we can then send them an email to get their password and register, et cetera. The other thing that I chose to require, but it's technically optional, is that first name. And the reason I made the first name field required is purely just because I wanted the person to get the nice treatment of showing them their first name on the menu item. If we didn't provide that and they just filled in the form and it was not not required, it would display my account. So it's not like the end of the world, but I like that personalization. So the other little thing that I did here was I created a Boolean field or checkbox field in the forms that are. So all this field does is it is a toggle for a standard email notification preference field for your new blog. This field already exists. It's automatically created every time you create a new blog. So I changed the wording a little bit to make it a little more human readable, but other than that it's normal. And I made this required, but the actual checkbox is not that causes it to display. So this means that if the person chooses I want to be notified, then it's required. All right, so now that we have those fields, you're probably wondering, all right, so how do we actually make this form submission result in someone having access? So where this comes in is contact lists. So we have two different contact lists and AJ set both of these to have access to our new members only blog using private content. The the thing that AJ mentioned earlier is that there is a property for contacts called registered at. And you, when you are creating a contact list, can create a contact list that is automatically populated with contacts based on if the registered AT has a value. So this, as Ajay had noted earlier, will automatically happen for anyone who signs up and becomes an actual member. So they actually create a password for logging in. Now you can also have a separate list and this list, you could make it so that it's based on form submission only. So in this case you can make it so that I'll just delete this just to make it so you can see the steps on how to do this. But add a filter, go form submission and then members only. There we go. And so that simple, that simple form submission will make it so that the person has access to your blog and they'll get an email, but they won't end up on that active members list until they've actually created their password. So there's a couple of nifty things that you can do with this. So think of these membership lists, kind of like roles or permissions. You can do things for different users and customize their experience based on the lists that they're in. So for example, maybe you don't want all of your members to actually have access to that blog. Maybe you want it so that the people who subscribe like actually fill out that landing page form. Those are the only ones that get access. Everyone has to fill out that form. So something that you could do in forms if you've never used it before. It's a super cool feature, but there is this feature called Queued Progressive fields. So basically if you already have them as a member and you already have some information on them, you can actually make it so that different fields will appear in this form asking for different information that you don't already have on them. So you could do this to create a bunch of different gated content if you wanted to. That basically the user unlocks more and more of your website. So with all of that said, I'm going to pass it back to AJ who will share some examples of some membership sites from our community.

Alrighty. Thank you, John. There we go. Alrighty. So we have many sites that are powered by HubSpot and also make use of our membership system. In fact, many were actually created by you, our solutions partners. The following are just three examples of sites that are live today and use our membership functionality. Impulse Creative has built many sites that run on our membership systems. Two in particular are their Hub LMS Learning Management System and Sprocket Talk, which is a repository of HubSpot How To's industry expert interviews and courses. We also have the Sales Genius Network which is a resource center committed to learn, committed to creating a learning and growth environment for anyone in a client success facing position. And our Last example is NewBox Partners or New Boxes Partner Portal which was created by Animal Inbound Marketing. New Box provides management software for companies and accountants. Partners are able to log in and view accounts that they have referred to New Box along with any benefits that they have earned from referrals. So that concludes today. We'll see you again soon. We're going to be hopefully running more of these types of workshops in the future. I know AJ and John are running more of these for our developer audience, so stay tuned and more to come. All right, thanks all.