Steve

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>
</div>

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

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.welcome{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Centered text */
.howcanwe{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

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!

Discover more from SharePoint Moments

Subscribe to get the latest posts sent to your email.

8 comments

    • I am using it with Modern Pages. In the Modern Script Editor settings, have you enabled “Enable classic _SPPageContextInfo”?

      Reply

    • Note the text colour in the CSS is white, so if you don’t have a dark coloured background you won’t see the text. I have a banner image saved in the Site Assets library on the site that is blue.

      Reply

  3. Thanks for sharing, looks great. I have the same requirement.

    But my user wants to use a richtext editor to customize the welcome message, add emojis etc. Also they want to use in on all pages. Script editor webpart, I have to manually add it to all pages? That will be a lot of work to do.

    I tried SharePoint framework with React, pnp richtext control but it doesn’t work well.

    Reply

      • Thanks for quick response. It is helpful to use Power Shell script to add to pages.

        However, the styles are hard-coded in the script editor web part. If admin needs to change the font color, message, they need to come to IT to change the style for them. They prefer to do it themselves.

        I tried to use Sharepoint framework with richtext editor control from Pnp React Controls but the formatting is not kept in display mode. Also even in display mode, the Richtext editor web part is editable.

Leave a comment