Placing A Notification Banner on Public Pages

Overview

Learndot allows banners to be placed on all its Public Pages.

These banners could be useful for sharing any type of notification with your public audience, for example, sharing about a new training launch coming soon, or anything that you would like to get your learner’s attention.

If you prefer to watch this tutorial as a video, please click here.

How to implement the banner

Follow the steps below, logged in as an Admin, to your Learndot instance.

Step 1
Go to System > Setup -> System Settings and on the search bar, type skin.html.head:


Step 2
Click on “Edit”:


On the “Value” field, scroll down until the end of the code, and add some space after the last line of the code that is already placed there - this is to make sure you don’t change anything on the existing code.

Now, copy the code below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#F16021" }, "button": { "background": "#FF5000" } }, "showLink": false, "theme": "edgeless", "content": { "message": "University will be temporarily Down For Maintenance at 1900 PDT. We will be performing out Scheduled Maintenance where the our site will temporarily be unable. Any inconvenience caused by this we do apologize from our end.", "dismiss": "Got it!" } })}); </script>

And paste it by the end of the field/code, then click on Save.

 

Step 3

Check the public page to see if the banner is appearing:


Editing the banner style and message

1. To change the color of the background for the banner, you have to edit the part of the code that is shown below. The field accepts only “HEX Color Code”, please check further information here:

1 2 "popup": { "background": "#F16021" <---Only replace what is inside of ""


2. To change the color of the button for the banner, you have to edit the part of the code that is shown below. The field accepts only “HEX Color Code”, please check further information here:

1 2 "button": { "background": "#FF5000" <---Only replace what is inside of ""


3. To customize the message of the banner, you have to edit the part of the code that is shown below:

1 2 3 "content": { "message": "University will be temporarily Down For Maintenance at 1900 PDT. We will be performing out Scheduled Maintenance where the our site will temporarily be unable. Any inconvenience caused by this we do apologize from our end.", <---Only replace what is inside of "" this "dismiss": "Got it!" <---Only replace what is inside of "" this is you would need the button to have a different verbiage


If you need help or have further questions, please reach out to our Support: support@learndot.com.