App UI: Left Sidebar Profile

Module

First Name {{ personalization_token('contact.firstname', '') }}
Last Name {{ personalization_token('contact.lastname', '') }}
Client Profile Image / Avatar {{ personalization_token('contact.client_profile_image') }}
Program Type {{ personalization_token('contact.program', '') }}

Edit the Page in HubSpot
Select the Profile module
Select the profile module then select profile from the sidebar
Avatar Type
Select the avatar type you would like to use. We recommend using URL so the profile image can be personalised for each user.
Add the Profile image URL
Add the HubSpot token for the contact property that contains the profile image.
Now set the profile Name
This is the name of the user, use the HubSpot tokens for first name & last name here.

Copy the below tokens:

{{ personalization_token('contact.firstname', '') }}

{{ personalization_token('contact.lastname', '') }}
Set the Profile Description
Set the profile description, as standard, we use View Profile.
Set the Profile Subscription

The Profile Subscription is the "Subscription" or "Tier" the user has. This could be things like FREE, VIP, GOLD, etc.....

To set up a Subscription property in HubSpot create a new Contact property called Subscription or Program as a dropdown and add in your levels.

When the contact has a "Subscription" or "Tier" this will display here.
Setup your Edit Profile Page
Under Profile Link add the link the profile page, this page will need a form on it for the contact to update their contact details.
Save the Module

Now you have added personalisation to your module, we need to save it to be used on other pages.

Hover over the module, click on the dropdown.
Save section
Click on Save section
Name the module
Give the module a name
Set the description
Now you are set
Click on Save