Sometimes, users visit this site with JavaScript disabled in their browsers, and this stop certain features or layouts from working properly. To ensure visitors know they need JavaScript enabled, I added a JavaScript Required Notice
Why Use This Widget?
This widget detects if JavaScript is disabled and displays a clear, attractive message asking visitors to enable JavaScript. It works on any website, including platforms like Blogger, WordPress, or custom HTML templates.
How to Add It?
Simply copy and paste the following code before the closing </body> or </head> tag in your template or webpage: Minify the code before pasting
<noscript>
<style>
body, html {overflow: hidden;}
#JsEnable {display: none;}
#SDavidPrinceNoscript {
background: rgba(0, 0, 0, 0.92);
padding: 0;
position: fixed;
bottom: 0;
left: 0;
top: -100px;
right: 0;
z-index: 9999;
opacity: 1;
visibility: visible;
height: auto;
}
#SDavidPrinceNoscript .isiNoscript {
background-color: #0f172a;
color: #f8fafc;
position: absolute;
text-align: center;
padding: 0 30px 35px 30px;
margin: auto;
top: 30%;
left: 0;
right: 0;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.6em;
max-width: 600px;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
</style>
</noscript>
<noscript>
<div id='SDavidPrinceNoscript'>
<div class='isiNoscript'>
<span class='JSEnable'>JavaScript Required</span>
<br/>
<svg viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z..."/>
</svg>
<br/>
<p>JavaScript is currently disabled in your browser settings.</p>
<p>Please enable JavaScript to access all features and functionality of this site.</p>
</div>
</div>
</noscript>
How It Works
The code above uses the <noscript> tag to detect browsers that have JavaScript disabled. If JavaScript is turned off, it displays a popup message in the center of the screen asking users to enable JavaScript. The design is clean, responsive, and works in both light and dark modes.
Customization
You can edit the message text, colors, and icons to match your site’s branding. The layout uses CSS animations and styles for a modern, polished look.
Final Thoughts
Adding a JavaScript Required Widget is a small but important step to improve user experience. Many site features rely on JavaScript, so this reminder helps visitors enable it for the best experience.
Try it on your Blogger site, WordPress theme, or any custom website today!
