How to create an Intranet Welcome Message

I was asked recently to add a welcome message to an Intranet. Microsoft doesn’t provide an out of the box webpart for this, so I thought I’d take a look in the SharePoint App Store, there are a couple but neither of them really did what I wanted.

The design I had been given called for a background image with overlayed text welcoming the person visiting the Intranet. Good morning, good afternoon or good evening. Here is how I made the solution:

First I needed to install the Modern Script Editor webpart and add the App into my Intranet home site (to make the webpart available).

Next, I combined some HTML, Javascript and CSS into a code snippet. Here is the code I used.

 <div class="container">
  <img src="/sites/intranet/siteassets/banner.png" style="width:100%;">
  <h2><div class="welcome"><p id="WelcomeMsg"></p></div></h2>
  <div class="howcanwe">Can we help you with something?</div>

<script type="text/javascript">
var hour = new Date().getHours();
document.getElementById("WelcomeMsg").innerHTML = "Good " + (hour<12 && "morning" || hour<18 && "afternoon" || "evening")+", " + _spPageContextInfo.userDisplayName;

.container {
  position: relative;
  text-align: center;
  color: white;

/* Centered text */
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
/* Centered text */
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);

I uploaded my background image into the SiteAssets library on the Intranet home site. Google helped me with a few things including the Javascript and CSS.

FinalIy, added a full width section to the top of my Intranet page and inserted the Modern Script editor and pasted in the code. I needed to enable “Enable classic _spPageContextInfo” in the webpart settings for the Javascript to work.

There you have it!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s