Add welcome pop up for first time users of your site using AngularJs Material

Hi Guys,

We really do only have one chance for putting a first impression for end users on our website. User's will never land back to your website if there is nothing interesting found on web site. Same logic works for SharePoint sites too. When a visitor lands on your site for the first time (and maybe the last), how you welcome them will have a big impact. This can be accomplished with pop-up boxes, fullscreen welcome mats, live chat invitations, and more.
This post is all about a welcome popup on SharePoint site. In brief, I try my best to provide very easy solution of showing welcome pop up.

Requirement: One of my recent project client asked to show a welcome message. Server side webarts are not promoted by out clients because our site was built in SP online. It sounds very easy but complication added by showing this pop up only once per user.

Solution: As a solution, i suggested to achieve this using Content editor web part. Just place some quick JS code on the landing page and with the help of a list we are able to detect if user is first time user or not. So here is the components of this solution:

1. A list "Users" which stores list of first time users
2. Content editor web part.
3. Site Assets library to refer the local references like Angular, Jquery, css etc.

Let me go through step by step implementation of this solution.

Step I: Create a "Users" list

1. Visit Site > Site contents.
2. Click on New > Choose Custom List template> Name it as "FirstTimeUsers".
3. Once list is created. Navigate to newly created List settings > Add column
4. Add column "User" of type "Person and Group".
5. Now with this list Title field is required. We can make this field hidden or optional if not required.

We are done with creating a list which stores information about first time users. We will be updating using rest api calls and each time when user logged on to site. His/her entries will be added to this list only.
Step II: Add references for angular, material, jquery etc.
This step can be skipped in case you need to refer all required libraries from CDN. But I never recommend this way, rather download the latest files to Site assets library. It also reduces extra burden on your site to download these library each time from CDN.

1. Navigate to the Site assets library.
2. Create a folder called "CustomFiles".
3. Create another folder "AngularJS".
4. Download files angular.min.js, angular-animate-min.js, angular-aria.min.js, angular-material.min.css, angular-material.min.js, angular-messages.min.js, jquery-3.3.1.min.js
5. Upload these files to AngularJs folder.   

Step III: Create angularJS app files

1. Create two files named as: dialog.tmpl.html and dialogApp.js
2. Copy following code to dialog.tmpl.html file: dialog_tmpl_html
3. Copy following code to dialogApp.js: dialogapp_js
4. Now change the <Site URL> with the url of your site.

These two files are required for angularJS to initialize and configure to show dialog box. The html file can be used to modify contents of dialog box.

Step IV: Add content editor webpart on homepage.

1. Navigate to the page where you need to show pop up
2. Edit this page and click on add webpart under any zone
3. Under "Media and content" find "Content Editor" web part. and add it.
4. Now Edit this web part and under ribbon find "Format text" tab and "Edit Source" option under it.
5. Now past following code here:

http://SiteURL/SiteAssets/customfiles/angularjs/angular.min.js
http://SiteURL/SiteAssets/customfiles/angularjs/angular-animate.min.js
http://SiteURL/SiteAssets/customfiles/angularjs/angular-aria.min.js
http://SiteURL/SiteAssets/customfiles/angularjs/angular-messages.min.js
http://SiteURL/SiteAssets/customfiles/angularjs/angular-material.min.js
http://SiteURL/SiteAssets/customfiles/dialogApp.js
http://SiteURL/SiteAssets/customfiles/angularjs/jquery-3.3.1.min.js
<link href="<SiteURL>/SiteAssets/customfiles/angularjs/angular-material.min.css" rel="stylesheet"/>

​​​​​​​

</div>

That is it. Just save your page and Publish it.

Step V: Test your pop up.
Now log on with separate users on the home page and check if there is entry created under "FirstTimeUsers" list.
Let me explain here a little about the ajax calls here. The code under dialogApp.js files first get the information of the logged on user. Get user information SharePoint using REST Api. Then using REST api, it tries to find out its entry under "FirstTimeUsers" list. Here is the rest call:

/_api/web/lists/getByTitle('FirstTimeUsers')/items?$select=User/EMail&$expand=User&$filter=User/EMail eq '<email_of_user>'

In case, it found any entry popup is not shown to user. But if it has found any entry then pop up is shown and on close event of the pop up another rest query will insert entry to the FirstTimeUsers List.

That is all about it. Don't forget to hit like and kindly rate this article.

Happy SharePointing !!!