Unfortunately this isn’t possible using the HTML widget as we don’t have access to variables from other areas of the platform. However, using the My profile widget, it’s possible to get the user’s full name (no way that I know of to just get first name unless their user profile is missing a last name value).

Using the my profile widget you can hide everything else and make something like a welcome message that could look like this:

Here’s the CSS to recreate this look:

/*My Profile Welcome Message*/
 myprofile-widget .wrapper-shadow  {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}
 myprofile-widget .fullName::before { 
  content: "Welcome, ";
}
 myprofile-widget .profile {
padding: 20px 0px !important;
background: none !important;
}
myprofile-widget .avatar__initials, myprofile-widget .email, myprofile-widget .widget-actions-container, myprofile-widget .avatar-container{
  display: none;
}

myprofile-widget .cover {
  background-color: transparent !important;
}
myprofile-widget .details-container {
  color: #343A40 !important;
  font-size: 1.5em !important;
}

Alternatively, some people opt to add text around the Name portion of the standard profile widget like this:

Here’s the CSS for that:

/*Customize welcome text on My profile Widget*/
.fullName::before { 
  content: "Hello ";
}

.fullName::after { 
  content: "! Welcome to the Docebo Academy! On the right side of this page, you'll find a learning plan to help you master the Docebo Platform. Be sure to check out the Learner Menu in the top left for more resources!";
}

@nick.tosto These are great ideas for customization, but then it would apply to all instances of the My Profile widget, correct?  So you couldn’t use that widget to display other additional fields on other pages in the more standard format?  Or is there a way to create a special div class for the My Profile widget that you want to have this messaging? 

@hwolfehall  you can add the widget or page ID at the beginning of the CSS snippets to limit scope to only apply to the defined widget/page.

The page ID is easy to find - it’s the number in the URL of the page. https://whatever.docebosaas.com/pages/61/my-page 

If you wanted the CSS to apply to my profile widgets on page 61, you would add:

/*Customize welcome text on My profile Widget*/
#doc-page-61 .fullName::before { 
  content: "Hello ";
}

#doc-page-61.fullName::after { 
content: "! Welcome to the Docebo Academy! On the right side of this page, you'll find a learning plan to help you master the Docebo Platform. Be sure to check out the Learner Menu in the top left for more resources!";
}

Widget ID is a little harder to find. You have to right click on the widget and inspect element and you’ll see something like “ID=”doc-widget-89”” in the code on the element. Once you spot the correct ID you could do the same thing I did with the page ID above, except use the widget ID instead. So:

/*Customize welcome text on My profile Widget*/
#doc-widget-89 .fullName::before { 
  content: "Hello ";
}

#doc-widget-89 .fullName::after { 
 content: "! Welcome to the Docebo Academy! On the right side of this page, you'll find a learning plan to help you master the Docebo Platform. Be sure to check out the Learner Menu in the top left for more resources!";
}

@nick.tosto THANK YOU!!  I will try this immediately!!