Referrally

Referrally is a versatile referral program plugin designed to supercharge customer engagement and drive sales for e-commerce businesses. This lightweight, single-page application integrates seamlessly into the "My Account" section of online stores, offering a user-friendly dashboard that empowers customers to promote your brand effortlessly. Built with HTML, CSS, and JavaScript, it delivers a responsive experience optimized for both web and mobile devices, ensuring accessibility across all screen sizes.

At its core, Referrally simplifies referral marketing with intuitive sharing tools. Users receive a unique referral link accompanied by a "Copy Link" button and pre-built social sharing options, including Email, Twitter, Facebook, WhatsApp, and Telegram. For offline promotion, the plugin allows users to generate QR codes and download custom branded referral flyers as PDFs, complete with their personal link and a scannable QR code. These features make it easy for customers to spread the word online and in-person, amplifying your store’s reach.

The user dashboard provides real-time tracking of referral progress, displaying the total number of referrals sent, those pending action, and those completed with a purchase or signup. A detailed reward breakdown highlights earned benefits—such as discount codes or store credits—and pending rewards awaiting redemption. Each referred friend’s status (invited, signed up, or purchased) is clearly indicated with color-coded labels, giving users full visibility into their referral impact.

To motivate participation, Referrally incorporates gamification elements. A dynamic progress bar tracks users’ advancement toward the next reward tier or milestone, while personalized badges like "Early Adopter" or "Top Referrer of the Month" celebrate achievements. Upon reaching milestones, users are greeted with engaging animations, such as confetti effects, fostering a sense of accomplishment. Encouraging messages, such as "Just 2 more referrals to unlock your next $25 bonus," keep users motivated to continue sharing.

Reward redemption is straightforward and transparent. Users can activate their earned rewards with a single click, applying discount codes or claiming credits directly from the dashboard. Expiration dates for time-sensitive bonuses are prominently displayed, ensuring users never miss out. The plugin also includes a comprehensive referral history log, listing all referrals with dates, anonymized friend initials, statuses, and rewards earned. Users can export this history as a CSV or PDF for their records, adding convenience and accountability.

For store owners, Referrally offers robust admin controls accessible via additional tabs. Customize referral settings, such as link prefixes and daily share limits, define reward rules for referrers and referees, and set milestone bonuses with expiration periods. Fraud detection tools allow monitoring of suspicious activity, while pre-configured email templates streamline communication. Integration with popular e-commerce platforms (WooCommerce, Shopify, BigCommerce) and CRMs (Klaviyo, Mailchimp, ActiveCampaign) ensures seamless operation within existing workflows.

Support is built-in, with an FAQ link addressing common questions and a contact form for reporting issues, enhancing user trust. With its clean design, fast-loading CDN-hosted dependencies, and focus on usability, Referrally transforms customers into brand advocates, boosting sales through organic growth. Whether you’re running a small shop or a large online retailer, this plugin delivers a powerful, all-in-one solution for referral marketing success.

Add to cart

Referrally boosts sales with a referral dashboard, social sharing, real-time tracking, and gamified rewards for e-commerce stores.

Features

User Dashboard Features Embedded Dashboard: Seamlessly integrates into the "My Account" section of e-commerce stores, providing a centralized referral hub. Responsive Design: Fully adapts to web and mobile devices, with a grid layout that collapses to a single column on smaller screens. Unique Referral Link: Generates a personalized referral link for each user, displayed prominently with a "Copy Link" button for easy sharing. Social Sharing Tools: Includes pre-built buttons for Email, Twitter, Facebook, WhatsApp, and Telegram, enabling one-click sharing to popular platforms. QR Code Generation: Allows users to create a scannable QR code of their referral link for offline promotion. Branded Flyer Download: Offers downloadable PDF flyers featuring the referral link and QR code, customizable for physical distribution. Referral Status Tracking: Displays real-time counts of total referrals sent, pending (invited or signed up), and completed (purchased). Reward Breakdown: Shows earned rewards (e.g., discount codes, store credits) and pending rewards awaiting redemption. Status Indicators: Color-coded labels (blue for invited, yellow for signed up, green for purchased) track each referred friend’s progress. Progress Bar: Visualizes advancement toward the next reward tier or milestone with a smooth, animated bar. Gamification Elements: Awards badges like "Early Adopter" or "Top Referrer" and triggers confetti animations upon milestone completion. Encouragement Messages: Displays dynamic prompts, such as "Just 2 more referrals to unlock your next bonus," to motivate users. Reward Redemption: Enables users to activate rewards with a "Redeem" button, generating new discount codes as needed. Expiration Dates: Lists expiration dates for time-sensitive rewards, ensuring users know when to act. Referral History Log: Provides a detailed table of all referrals, including dates, friend initials, statuses, and rewards earned. History Export: Allows exporting referral history as CSV or PDF files for personal records or reporting. Support Tools: Features an FAQ link with sample answers and a contact form button for reporting issues to support. Admin Control Features Referral Settings: Customizable link prefix (e.g., "https://store.com/ref/") and daily share limit to control referral frequency. Sharing Method Toggle: Enables or disables sharing options (Email, Social Media, Messaging Apps) via checkboxes. Reward Configuration: Defines referrer and referee reward types (discount, credit, cash, points) and amounts, with flexible triggers (purchase or signup). Milestone Bonuses: Sets referral thresholds and bonus amounts, such as $25 for 5 referrals, with expiration periods. Fraud Detection: Monitors suspicious activity with a table listing users, IPs, and issues, plus buttons to flag or block accounts. Fraud Check Tool: Allows manual user checks, adding detected issues like VPN use or duplicate emails to the fraud log. Email Templates: Customizable templates for referral invites, status updates, and reward notifications, with preview functionality. Integrations: Supports toggling connections to e-commerce platforms (WooCommerce, Shopify, BigCommerce) and CRMs (Klaviyo, Mailchimp, ActiveCampaign). General Features Real-Time Updates: Dynamically refreshes referral counts, reward totals, and charts without page reloads. Dark Mode: Toggles between light and dark themes with a single button, enhancing usability in different lighting conditions. Interactive Chart: Visualizes referral trends over time with a responsive line graph powered by Chart.js. Data Export: Exports overall program stats (total referrals, top referrer, etc.) as a CSV file from the admin dashboard. Notification System: Provides instant feedback for actions (e.g., "Link copied!" or "Reward redeemed!") with timed pop-ups. Fast Performance: Leverages CDN-hosted libraries (Font Awesome, Chart.js, QRCode.js, html2pdf.js, JS Confetti) for quick loading. Clean Design: Features a modern, gradient-based UI with tooltips, shadows, and animations for a polished user experience. Single-File Deployment: Delivered as a single HTML file with inline CSS and JS, simplifying installation and setup.

Requirements

To effectively use Referrally, ensure your environment meets the following requirements: Hosting and Deployment Web Server: A basic web server or hosting service capable of serving static HTML files (e.g., Apache, Nginx, or platforms like Netlify, GitHub Pages, or Firebase Hosting). Domain or Subdomain: Optional but recommended for live use, allowing the plugin to be embedded in an e-commerce store’s "My Account" section (e.g., https://yourstore.com/referrally/). HTTPS: Required for clipboard functionality (navigator.clipboard) and secure integration in modern browsers; ensure your hosting supports SSL/TLS. Browser Compatibility Supported Browsers: Modern versions of Firefox, Safari, Opera, Chrome, and Edge. The plugin uses contemporary JavaScript features (e.g., fetch, Promise, CSS Grid) and is not compatible with legacy browsers like Internet Explorer 6-11. JavaScript Enabled: Browsers must have JavaScript enabled, as the plugin relies heavily on client-side scripting for interactivity and real-time updates. Internet Connectivity CDN Access: An active internet connection is required to load external libraries from Content Delivery Networks (CDNs): Font Awesome (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css) for icons. Chart.js (https://cdn.jsdelivr.net/npm/chart.js) for the referral trends graph. JS Confetti (https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js) for milestone animations. QRCode.js (https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js) for QR code generation. html2pdf.js (https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js) for flyer and history PDF exports. Reliable Connection: Ensures fast loading of these dependencies; no local fallbacks are included in the single-file deployment. E-commerce Integration (Optional) Store Platform: For full functionality, embed the plugin within an e-commerce store using platforms like WooCommerce, Shopify, or BigCommerce. Manual integration requires adding the HTML to a user-facing page (e.g., via an iframe or custom code block). API Access: To sync referral data (e.g., purchases, signups) with your store, custom server-side scripting (not included) is needed to connect Referrally’s frontend to your backend. Basic usage works standalone without this. Technical Skills Basic HTML Knowledge: Required to embed the plugin into your store’s "My Account" section by copying the referrally.html code or linking to it. Customization (Optional): Familiarity with HTML, CSS, and JavaScript to modify styles, reward rules, or integrate with server-side logic if extending beyond the standalone version. User Environment No Installation Needed: As a single HTML file with inline CSS and JS, no additional software or dependencies need to be installed on the server beyond hosting the file. File Permissions: Write access to upload referrally.html to your hosting environment. Limitations Standalone Mode: Without server-side integration, referral data is simulated and stored in browser memory (reset on refresh). For persistent data, a backend (e.g., PHP, Node.js) and database (e.g., MySQL) are required but not included. No Framework Dependency: Does not require Bootstrap, TypeScript, or other frameworks, making it lightweight but limiting out-of-the-box compatibility with such systems unless customized. Summary for Users To use Referrally: Host referrally.html on a web server with HTTPS. Ensure internet access for CDN-loaded libraries. Embed it in your e-commerce store’s user area (optional for full integration). Use a modern browser with JavaScript enabled. This plugin is ideal for store owners seeking a quick, frontend-only referral solution, with optional advanced integration for persistent data and platform syncing. Let me know if you need a more condensed version or additional details!

Instructions

Thank you for purchasing Referrally - Referral Program Plugin! Follow these steps to get started and make the most of your referral marketing tool. 1. Download and Prepare Locate the File: After purchase, download the zip file from ThemeForest. Extract it to find referrally.html, the core plugin file containing all HTML, CSS, and JavaScript. No Additional Installation: This is a single-file application with inline code and CDN-hosted dependencies—no extra software or libraries need to be installed. 2. Hosting the Plugin Upload to Your Server: Use an FTP client (e.g., FileZilla) or your hosting provider’s file manager to upload referrally.html to your web server. Place it in a directory accessible via HTTPS (e.g., https://yourstore.com/referrally/). Ensure HTTPS: Modern browsers require a secure connection for features like clipboard copying. Verify your hosting supports SSL/TLS. Test Access: Open the URL in a supported browser (Firefox, Safari, Opera, Chrome, Edge) to confirm the plugin loads. An internet connection is needed for CDN libraries (Font Awesome, Chart.js, etc.). 3. Embedding in Your Store Basic Embedding: To integrate into your e-commerce store’s "My Account" section: Copy the entire <body> content from referrally.html. Paste it into your store’s user dashboard page (e.g., via a custom HTML block in WooCommerce, Shopify, or BigCommerce). Alternatively, use an . Standalone Use: If not embedding, simply link to the hosted URL from your site (e.g., a "Refer & Earn" menu item). 4. Using the Plugin User Dashboard: Navigate to the "User Dashboard" tab (or embedded section) to access referral tools: Share your unique link via social buttons (Email, Twitter, Facebook, WhatsApp, Telegram). Generate a QR code or download a branded flyer for offline sharing. Track referrals, redeem rewards, and export history as CSV/PDF. Admin Controls: Use other tabs to customize settings: "Referral Settings": Adjust link prefix and sharing options. "Reward Rules": Set reward types, amounts, and milestones. "Fraud Control": Monitor and manage suspicious activity. "Emails & Messaging": Edit templates for user notifications. "Integrations": Toggle connections to platforms (requires custom backend setup). 5. Customization (Optional) Edit Appearance: Modify the inline CSS in referrally.html (search for <style> tag) to match your store’s branding (e.g., colors, fonts). Adjust Rewards: Update the referralData object in the <script> section to change default reward values or milestones. Persistent Data: For live data storage (beyond browser memory): Set up a server-side backend (e.g., PHP, Node.js) with a database (e.g., MySQL). Modify the JavaScript to fetch and save data via API calls (not included in the base plugin). 6. Testing and Troubleshooting Test Features: Share links, redeem rewards, and export history to ensure functionality. Data resets on refresh in standalone mode. Browser Check: Use a modern browser with JavaScript enabled. Legacy browsers (e.g., IE) are not supported. Support: Refer to the "Support & Help" section in the User Dashboard for FAQs, or contact us via the provided form for assistance. 7. Going Live Launch: Once embedded and tested, promote the referral program to your customers via email, banners, or site announcements. Monitor: Use the admin dashboard to track referral stats and tweak settings as needed. Notes Dependencies: The plugin relies on CDN-hosted libraries (listed in the <head>). Ensure your hosting allows external requests. Integration: Full platform syncing (e.g., WooCommerce, Shopify) requires custom coding beyond this frontend solution. Enjoy boosting your sales with Referrally! For questions or advanced customization, reach out via our support channel.

Size

9.69 KB