RatePress
RatePress Docs

Getting Started

  • Introduction
  • Getting Started

Core Features

  • Rating System
  • Templates
  • Blocks & Shortcodes

Advanced Features

  • Notifications
  • Confetti Effects

Languages

  • Translation System

Developer Guide

  • Architecture
  • API Reference
GitHubLive Demos

RatePress

The modern rating plugin for WordPress. Built with clean architecture, designed for performance, and loved by developers.

Documentation

  • Get Started
  • Technical Architecture
  • Templates
  • Translations

Resources

  • Download
  • Support
  • Contact
  • Review Us

© 2025 RatePress. All rights reserved.

Made with passion by Code Idealists

Confetti Effects

Add spectacular particle explosions to your rating interactions. Create custom effects with our visual playground and integrate them seamlessly into your WordPress site.

Open PlaygroundGet Started

What are Confetti Effects?

Confetti effects bring joy and celebration to user interactions by creating beautiful particle explosions when visitors rate your content. Powered by the popular canvas-confetti library, these effects are highly customizable and performant.

Visual Impact

Create memorable experiences that celebrate user engagement and make your site more interactive and fun.

Easy to Use

Choose from presets or create custom effects with our visual playground. No coding required for basic setups.

Highly Customizable

Control particle count, colors, shapes, physics, and more. Import/export configurations between sites.

How It Works

Confetti effects are triggered automatically when users successfully submit ratings. The system integrates seamlessly with RatePress rating widgets.

Technical Architecture

RatePress uses the canvas-confetti library to render particle effects. The integration is event-driven and respects user preferences.

Key Components:

  • Particle Settings: Configuration stored per post type in WordPress options
  • Event Listeners: Attached to rating widgets, triggered on successful rating events
  • Origin Calculation: Determines explosion point based on button position, cursor, or screen center
  • Performance: Debounced initialization, respects reduced motion preferences
Effects are only loaded when enabled for specific post types, ensuring optimal performance.

Getting Started

Follow these simple steps to add confetti effects to your rating system.

Step 1: Enable Effects

In your WordPress admin, go to RatePress settings and navigate to the Display tab.

Navigation:

WordPress Admin → RatePress → Display
Find the post type you want to add effects to (e.g., Posts, Pages) and expand its settings.

Step 2: Configure Effects

In the Explosion Effects section, enable particle effects and choose your settings.

Basic Setup:

  • • Toggle "Enable Particle Effects"
  • • Choose a preset (Basic Cannon, Stars, etc.)
  • • Set explosion origin (Button Center, Cursor, etc.)
  • • Click "Test Particles" to preview

Step 3: Advanced Customization

For more control, use our Confetti Playground to create and import custom effects.

Our visual playground lets you create effects without coding. Perfect for beginners!

Create

Use sliders and controls to design your perfect effect in real-time.

Export

Download your creation as JSON or copy to clipboard.

Import

Upload JSON files or paste configurations directly into RatePress.

Quick Playground Workflow:

  1. 1. Click "Open Playground" above or visit /confetti
  2. 2. Experiment with different presets and settings
  3. 3. Click "Test Effect" to see it live
  4. 4. When satisfied, click "Export" → "Download JSON"
  5. 5. Back in RatePress, click "Import/Export" → "Upload JSON File"
  6. 6. Select your downloaded file and import

Available Presets

Choose from professionally designed effects or create your own custom configurations.

🎉
Basic Cannon

Classic upward explosion

✨
Realistic Look

Natural particle physics

⭐
Stars

Shining star shapes

🎆
Fireworks

Colorful bursts

❄️
Snow

Gentle falling effect

🚀
Emoji

Custom emoji particles

🌟
Random Direction

360° scatter effect

🎨
Custom

Full control over everything

Code Examples

For developers who want to integrate confetti programmatically or extend functionality.

Manual Triggering

Trigger confetti effects programmatically using the global RatePress function.

Custom Integration

Troubleshooting

Common issues and their solutions.

Effects Not Showing
  • • Ensure effects are enabled for the specific post type
  • • Check that ratings are submitting successfully
  • • Verify canvas-confetti library is loaded
  • • Test with browser developer tools open
Performance Issues
  • • Reduce particle count for better performance
  • • Enable "Respect Reduced Motion" setting
  • • Use presets instead of custom configurations
  • • Test on actual devices, not just desktop
Import/Export Issues
  • • Ensure JSON is valid (use a JSON validator)
  • • Check file size limits for uploads
  • • Try copying JSON directly instead of file upload
  • • Clear browser cache and try again

Ready to Add Some Magic?

Start creating amazing confetti effects today. Your users will love the extra celebration!

Open Confetti PlaygroundBack to Documentation
Have questions? Get in touch