Your CMS Hub website is a presentation and interactivity layer for your CRM, meant for your prospects and customers to interact with. There's no greater example of this than that you can create a logged in experience for your customer, enabling 2 way communication, gating of special resources, and managing of your shared information. Tying your logged in experience to the experience your users see throughout the rest of your site helps your customers take advantage of the familiarity of design, and reduces the need to create special assets.
What ties your whole website together normally is your site's header and footer. This means your header and footer are a great way to tie both the logged-in and logged-out experiences together. You need your users to be able to navigate both the public and private parts of your website easily.
Logged out customers need:
- A way to log in.
- Access to the public pages on your site.
Logged in customers need:
- A way to log out.
- Manage their preferences/settings where relevant.
- Access to any private content you want them to be able to see.
- Access to the public pages on your site.
We're going to solve this by creating 3 Navigation menus. One for all of your publicly accessible content. One for when the user is logged out. One for when the user is logged in. We're then going to modify the HubSpot theme boilerplate's menu module to support, and display menus based on if the user is logged in or not.
Before we get into it, if videos are more your thing these instructions are available in video form from the HubSpot Essentials for Developers: Getting Started with Memberships training.
Prerequisites
What you'll need to be able to follow along:
- The memberships functionality (available in CMS Hub Enterprise).
- A connected domain name. Memberships functionality requires a connected domain to work.
- Comfort with HTML, and HubL.
Creating the menus
Your first menu, you likely already have. This is the public main navigation for your site. It probably has links like "About us", "Contact us", "Pricing", "Services". Regardless of which of the 3 menus you're creating the instructions are the same, the main difference is the links themselves.
- Open website settings > navigation.
- Click the name of the currently selected menu. This opens a dropdown showing all of the advanced menus in your site. Click "Add menu".
- Name your menu. I've named my 3 menus "Main Nav", " Main Nav__logged in", "Main Nav__logged out". You don't need to use those same names, but having names that are clear as to what they represent is important.
- Add your menu items. For your "Main Nav" menu those will be all of the publicly available pages. "Main Nav__logged in" will show nav items that are exclusive to logged in users, including a link to log out. "Main Nav__logged out" will show for users who are not logged in, commonly this would be a link to log in.
How to add a log in link to your menu
In your "Main Nav__logged out "
- Add a new menu item, choose "Add URL link".
- Set the label to "log in".
- Set the URL to
/_hcms/mem/login - Add a new menu item, choose "Add URL link".
- Set the label to "log out".
- Set the URL to
/_hcms/mem/logout
How to add a Log out link to your menu
In your "Main Nav__logged in" menu you'll want to:
Modifying the menu module
We're going to modify the HubSpot Theme Boilerplate's menu module as it's a great starting point for a menu. First we'll add a field for turning on/off the menus for memberships. This is handy if you know you'll be adding the memberships functionality to your production site but are not yet ready for people to use it. We'll create a field group for the membership settings. Then we'll be adding menu fields to select our new menus.
Set up the module fields
1.Add a boolean field
This module may not always be used in a context where we want the menu to change based on being logged in. To retain that flexibility let's add a boolean field so the content creator can turn the feature on/off. We'll set the display of this field to toggle. The field controls a significant functional aspect of the module. Toggle in this case makes it more apparent.
2.Add a field group for the memberships related settings
To keep things organized for the content creator we'll create a field group for these memberships features. We'll also use this group to hide the memberships features when they're not enabled.
3.Add menu fields for the new menus.
We're going to add 2 new menu fields. You can get the menu ids to use as default values from the URL within advanced menus. https://app.hubspot.com/menus/<your_account_id>/edit/<menu_id>.
In my code snippets I'm leaving default off, since my menu id's will not match yours, but you just need to set the default value.
Add support for the fields to the module's HTML
We're going to modify the macro used to render nav menu items to enable us to re-use that code for our two new menu fields. We're then going to add a few if conditions to handle the different states for this menu. To finish it off we'll use HubL to render our new menus right in the main nav menu.
Update the menu_items macro to accept a menu_id
The macro already exists for rendering menu items, so all we need to do is make it so it gets the menu id from the macros parameters.
Now when we use this macro we'll need to provide the menu id.
Add support for if membership menus are enabled.
Inside the nav element we'll add an if statement checking if the membership menus are enabled.
Render the menus
Inside the if statement you just created, add two of the macro statements. Set the menu_id parameter for each to the module menu field.
Final code
Here's the full HTML + HubL for the module:
Here's the full fields json:
Now we have 2 different experiences depending on if the user is logged in or not. If you have pages that you only want to link to based on if the user is logged in or logged out, you now have that control.
Celebrate by adding some value to your memberships gated experience
You've now created an effective way to tie your logged in, and logged out experiences together. One of the profound benefits of this is, all of your existing site templates using this header are now usable for memberships templates because they contain the things that logged in users need easy access to.