Quick Start: Install and Configure Html Password Pro in 5 Minutes

Html Password Pro is a lightweight client-side tool for adding password protection to static HTML pages. This guide walks you through installation and configuration in five minutes so your page is protected quickly.

Prerequisites

A static HTML site or a single HTML file
Basic familiarity with editing HTML
A text editor (VS Code, Notepad++, etc.)

1) Download the package (30 seconds)

Get the Html Password Pro files from the official source (download zip or clone repository).
Unzip into your project folder or copy the single script and stylesheet files into your site’s assets folder.

2) Add files to your page (30 seconds)

Place the CSS and JS references inside theof your HTML file:

html
<link rel=“stylesheet” href=“path/to/html-password-pro.css”>
<script src=“path/to/html-password-pro.js” defer></script>

3) Insert the protector element (45 seconds)

Add the HTML element that Html Password Pro uses to show the password prompt. Place it directly inside the :

html
<div id=“html-password-pro” data-config=‘{“password”:“your-password”}’></div>

Replace “your-password” with the password you want to use.
If you prefer to keep configuration in JS, omit data-config and see step 4.

4) Configure via JavaScript (45 seconds)

For more options (multiple passwords, timeout, custom messages), initialize in a script tag after the library:

html
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
  HtmlPasswordPro.init({
    selector: ’#html-password-pro’,
    passwords: [‘your-password’, ‘another-password’],
    mask: true,
    timeout: 3600, // seconds to remember password
    onSuccess: () => console.log(‘Unlocked’),
    onFail: () => alert(‘Wrong password’)
  });
});
</script>

5) Customize appearance (30 seconds)

Override the default CSS by adding rules in your stylesheet:

css
#html-password-pro .hpp-container { background: rgba(0,0,0,0.7); }
#html-password-pro .hpp-input { border-radius: 6px; }

Adjust fonts, colors, and layout as needed.

6) Test quickly (30 seconds)

Open the page in your browser.
Enter the password(s). Confirm the page unlocks and any timeout/remember features work.
Test wrong password behavior and styling on mobile.

7) Deployment notes (30 seconds)

This is client-side protection: do not use for high-security content.
For stronger protection, combine with server-side auth or restrict access via server config.
Minify and bundle the JS/CSS for production.

Default configuration reference

password(s): single string or array
mask: boolean (hide input)
timeout: seconds to remember
selectors: CSS selector for injection
callbacks: onSuccess, onFail

Troubleshooting (brief)

If prompt doesn’t appear: check script path and console for errors.
If password not accepted: ensure exact match and check for whitespace.
If styling broken: confirm CSS path and specificity.

That’s it — Html Password Pro should now be installed and configured.

Quick Start: Install and Configure Html Password Pro in 5 Minutes