Documentation

Complete guide to configuring and customizing Proofly for your website.

Package Contents

When you download SourceCode_v1.0.0.zip, you will find the following structure:

SourceCode_v1.0.0/
├── documentation/
│   └── documentation.txt     # Link to online documentation
└── proofly/
    ├── proofly.script.js     # Main plugin JavaScript
    ├── proofly.style.css     # Plugin styles
    └── index.html            # Demo Page

Copy the proofly folder to your website directory to get started.

Installation

1. Extract the SourceCode_v1.0.0.zip file.

2. Copy the proofly folder to your website's directory.

3. Include both files in your HTML (before the closing </body> tag or in the <head>): 

<link rel="stylesheet" href="proofly/proofly.style.css">
<script src="proofly/proofly.script.js"></script>

Initialization Methods

You can initialize Proofly in multiple ways depending on your needs.

Method 1: Zero Configuration (Easiest for Beginners)

Just call the function with no parameters. This uses all default settings and shows notifications in the bottom-right corner.

<script>
    // Simple initialization - uses defaults
    initProofly();
</script>

Method 2: With Custom Configuration

Pass a configuration object to customize position, colors, timing, and data.

<script>
    initProofly({
        position: 'bottom-left',
        theme: {
            highlightColor: '#e74c3c'
        },
        behavior: {
            minDelay: 2000,
            displayDuration: 6000
        }
    });
</script>

Method 3: Store Instance (Advanced)

If you need to reference the plugin later, store it in a variable.

<script>
    const proofly = initProofly({
        position: 'top-right'
    });
    // Now you can reference 'proofly' if needed
</script>

Configuration Options

Pass these options to the initProofly() function to customize behavior.

General Settings

Option Type Default Description
position String 'bottom-right' Corner to display notification. Options: top-left, top-right, bottom-left, bottom-right.

Theme Object (theme: {})

Property Default Description
backgroundColor #ffffff Background color of the notification card.
textColor #333333 Primary text color.
highlightColor #27ae60 Color for badges (Verified) and links.
borderColor #e0e0e0 Border color of the card.
showShadow true Toggle drop shadow on/off.
showVerified true Show or hide the "Verified" tick mark.

Behavior Object (behavior: {})

Property Default Description
loop true Whether to restart the notification cycle after finishing.
randomizeDelay true Randomize the delay between notifications for natural feel.
minDelay 3000 Minimum waiting time (milliseconds) before showing next popup.
maxDelay 8000 Maximum waiting time (milliseconds) before showing next popup.
displayDuration 5000 How long (milliseconds) each popup stays visible.
mobile.show true Enable/Disable notifications on mobile devices.
mobile.minimized false If true, shows a small bubble instead of full card on mobile.

Event Data Types & Examples

Define your notifications in the data.simulatedEvents array. Each event is an object with a type property and additional fields.

1. Sale Notification

Show that someone recently purchased a product.

Required: type, product, name, location

Optional: timeAgo, image

{
    type: 'sale',
    product: 'Premium Headphones',
    name: 'Alex M.',
    location: 'New York, USA',
    timeAgo: '2 minutes ago',          // Optional: Custom time text
    image: 'https://example.com/headphones.jpg'  // Optional: Product image URL
}

Note: If no image is provided, a shopping cart icon will be displayed.

2. Live Visitor Count

Create urgency by showing how many people are currently viewing the page.

Required: type, count

Optional: image

{
    type: 'visitor',
    count: 142,
    image: 'https://example.com/icon.png'  // Optional: Custom icon
}

3. Review / Testimonial

Display customer reviews with star ratings to build trust.

Required: type, name, stars, text

Optional: timeAgo, image

{
    type: 'review',
    name: 'Sarah J.',
    stars: 5,                          // Number from 1-5
    text: 'Best service I have ever used!',
    timeAgo: '1 hour ago',            // Optional
    image: 'https://example.com/avatar.jpg'  // Optional: Reviewer photo
}

4. Signup Alert

Great for building newsletter lists or showing new user registrations.

Required: type, name

Optional: timeAgo, image

{
    type: 'signup',
    name: 'Michael R.',
    timeAgo: 'Just now',              // Optional
    image: 'https://example.com/user.jpg'  // Optional: User avatar
}

5. Low Stock Warning

Trigger FOMO by showing low inventory levels.

Required: type, itemsLeft, peopleViewing

Optional: image

{
    type: 'stock',
    itemsLeft: 3,
    peopleViewing: 15,
    image: 'https://example.com/product.jpg'  // Optional: Product image
}

Complete Example with All Types

initProofly({
    position: 'bottom-left',
    data: {
        simulatedEvents: [
            { 
                type: 'sale', 
                product: 'Wireless Mouse', 
                name: 'John D.', 
                location: 'California',
                image: 'https://example.com/mouse.jpg'
            },
            { type: 'visitor', count: 94 },
            { 
                type: 'review', 
                name: 'Emma W.', 
                stars: 5, 
                text: 'Amazing quality!' 
            },
            { type: 'signup', name: 'Mike Ross' },
            { type: 'stock', itemsLeft: 5, peopleViewing: 12 }
        ]
    }
});

Advanced Usage

For developers who want to extend or customize Proofly beyond the basic configuration.

Code Architecture

Proofly v1.0.0 features a professional, CodeCanyon-quality codebase with the following structure:

Configuration Object

The plugin uses a DEFAULT_CONFIG constant that defines all available options. Your custom configuration is deep-merged with these defaults.

// Internal structure (for reference only)
const DEFAULT_CONFIG = {
    position: 'bottom-right',
    theme: { /* theme options */ },
    behavior: { /* behavior options */ },
    strings: { /* customizable text */ },
    data: { /* notification data */ },
    rules: { /* page display rules */ }
};

Direct Class Access

For advanced use cases, you can access the Proofly class directly:

<script>
    // Standard initialization
    const instance = initProofly({ position: 'top-left' });
    
    // Or use the Proofly class directly
    const customInstance = new window.Proofly({
        position: 'bottom-right',
        theme: { highlightColor: '#e74c3c' }
    });
</script>

Code Quality Features

The refactored codebase includes:

Customization Tips

Custom Strings

All user-facing text can be customized via the strings object:

initProofly({
    strings: {
        verified: 'Trusted',
        live: 'Right Now',
        purchased: 'bought',
        from: 'in',
        viewing: 'visitors viewing this',
        newsletter: 'subscribed!',
        someone: 'A customer'
    }
});

Page-Specific Rules

Control where notifications appear using the rules object:

initProofly({
    rules: {
        // Only show on these pages
        pages: ['/products', '/checkout'],
        
        // Never show on these pages
        excludePages: ['/admin', '/login']
    }
});

Mobile Optimization

Fine-tune mobile behavior:

initProofly({
    behavior: {
        mobile: {
            show: true,           // Enable on mobile
            minimized: true,      // Use bubble mode
            breakpoint: 768       // Mobile breakpoint (px)
        }
    }
});

Performance Considerations

Browser Compatibility

Proofly works in all modern browsers:

Changelog

v1.0.0 Initial Release

Released: 2026-01-10

  • Official Launch
  • Multi-Notification Engine (Sale, Visitor, Review, Signup, Stock)
  • Fully Customizable Theme & Behavior
  • Mobile Responsive with Minimized Mode
  • Intelligent Randomized Timing
  • Zero Dependencies - Pure Vanilla JavaScript
  • Lightweight & Fast Performance
  • Professional CodeCanyon-Quality Codebase
  • Comprehensive JSDoc Documentation
  • Advanced Timer Management (prevents conflicts on tab switching)