Skip to content

4QR Studio v1.0.0 - Dynamic QR Generator & Scan Analytics

Choose a tag to compare

View all tags
@JadaanDev JadaanDev released this 19 Oct 16:51
· 3 commits to main since this release
v1.0.0
788d14e

4QR Studio - v1.0.0

A high-conversion Dynamic QR Code Generator WordPress Plugin built with React, TailwindCSS, and Vite, featuring custom styles (patterns, frames, eyes, colors, transparency, logos), high-resolution downloads (PNG, SVG, PDF), and real-time Scan Analytics Tracking.

Designed following jadaan.dev styling vibes (Onyx Dark Minimal design system with offline self-hosted fonts and vector icons).

🚀 Key Features

1. Visual Designer (4QR Studio)

  • Top Header Bar: Clean back button, inline editable title, short link with 1-click clipboard copy, and dynamic destination URL editor.
  • Pattern Selector: 6 distinct module patterns (Square, Rounded, Extra-Rounded, Classy curves, Dots, Classy-Rounded).
  • Corners Style: 7 Outer Frame Styles and 7 Inner Eye Styles.
  • Colors & Transparency: Pattern and background color pickers, iOS-style Transparent background toggle switch.
  • Logo Integration: Custom brand logo upload, live thumbnail preview, size and margin sliders.
  • Preview & Export: Real-time high-contrast SVG preview, PNG, SVG, PDF (A4 print layout) exports, and direct clipboard copying.

2. Dynamic Shortlinks & Analytics Tracking

  • Dynamic Short Links: /q/{slug} (with fallback query parameter ?qr={slug}).
  • Privacy-Safe Scan Logger: Anonymized SHA-256 visitor hashing, device diagnostics (Mobile/Tablet/Desktop), OS, and browser detection.
  • Analytics Dashboard: Metric cards (Total Scans, Unique Visitors, Active Codes, Top Device), 14-day timeline chart, and Recent Scan Logs with CSV Export.

3. WordPress Integration & Page Takeover

  • Frontend Shortcodes:
    • [qr_generator]: Embeds the visual designer with automatic Full-Page Takeover (bypasses theme headers, footers, and margins).
    • [qr_analytics]: Embeds the analytics dashboard.
  • WP-Admin Isolation: Authoritative overrides that neutralize WordPress core forms.css input, button, and layout styling conflicts.
  • Zero-Seeded Clean State: 100% clean production startup with self-healing MySQL table creation.

📦 Installation Instructions

  1. Download the attached qr-wp-plugin.zip asset below.
  2. In your WordPress admin dashboard, navigate to Plugins → Add New → Upload Plugin.
  3. Choose qr-wp-plugin.zip and click Install Now.
  4. Click Activate Plugin. The database tables (wp_qr_codes, wp_qr_scans) and rewrite rules activate automatically.
Assets 3
Loading