I posted this before and have improved the code.
Many of you tried this and could not get it to work. This is not the ONLY way to communicate an outage, upcoming course, etc to your LEARNER DASHBOARD, but it is the coolest. It floats up and down the screen until they dismiss it and it is manual. It is a custom HTML widget for placement.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.callout {
position: fixed;
bottom: 20px;
right: 10px;
max-width: 250px;
background: white;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
z-index: 9999;
}
.callout-header {
background: #911313;
color: white;
padding: 10px;
text-align: center;
font-size: 16px;
position: relative;
}
.callout-header img {
max-width: 80%;
height: auto;
display: block;
margin: 0 auto 5px;
}
.callout-container {
background-color: #ccc;
color: black;
padding: 10px;
font-size: 14px;
text-align: center;
}
.closebtn {
position: absolute;
top: 5px;
right: 5px;
width: 25px;
height: 25px;
font-size: 18px;
color: white;
background: #911313;
border: 2px solid white;
border-radius: 50%;
cursor: pointer;
line-height: 20px;
font-weight: bold;
text-align: center;
padding: 0;
}
.closebtn:hover {
background: white;
color: #911313;
border: 2px solid #911313;
}
</style>
<div class="callout" id="popupBox">
<div class="callout-header">
<button class="closebtn" aria-label="Close" onclick="document.getElementById('popupBox').style.display='none';">×</button>
<img src="https://media.thoughtindustries.com/course-uploads/c50f33e0-665b-4906-a26e-7d18bc3b9c5e/4xfp8ysm1yx1-ITI-Logo-CMYK.png" alt="Coming Soon">
<p>Coming Soon!</p>
</div>
<div class="callout-container">
<p>Message to Learners goes here.</p>
</div>
</div>
The result. Will reload on page reload. This is not intended to be permeant.
