Web push notifications are a powerful tool to engage customers on your WordPress site, such as your WooCommerce store “My Shop” (from your “Blog Page” guide), by delivering real-time updates about sales, new products like “Flying Ninja” (from your “Creating Products” guide), or promotions. The OneSignal plugin, featured in the 6fc Live Educate WordPress video sponsored by Appmaker, offers a free, cloud-based messaging service to send push notifications to desktop and mobile browsers. This guide details how to set up a OneSignal account, install the plugin, configure notifications, and send a campaign, based on the video and enriched with insights from web sources.
Why Use OneSignal for Web Push Notifications?
- Direct Engagement: Reaches subscribed users instantly, even when they’re not on your site (e.g., Chrome, Firefox, Safari).
- Cost-Effective: Free plan supports unlimited subscribers and notifications (up to 30K web push subscribers).
- WooCommerce Fit: Promotes sales, new arrivals, or membership plans (from your “Membership Plans” guide) to verified users (from your “Email Verification” guide).
- Customizable: Offers segment targeting, scheduling, and analytics for high engagement.
- Limitations: Requires HTTPS for web push; manual setup for non-WordPress platforms; some advanced features (e.g., A/B testing) need a paid plan ($99+/month).
Step 1: Create a OneSignal Account
- Sign Up:
- Visit onesignal.com (linked in video description).
- Click Sign Up (per video).
- Log in with Google (per video) or use email/password.
- Verify your email if prompted.
- Set Up App:
- In the OneSignal dashboard, create a new app.
- Enter your Website Name (e.g., “SPC Cloud”, per video).
- Select Web Push as the platform (per video).
- Click Next: Configure.
- Configure Web Push:
- Choose Integration: Select WordPress Plugin (per video).
- Site Setup:
- Site Name: Enter your site name (e.g., “SPC Cloud”).
- Site URL: Copy your site’s URL (e.g., https://yoursite.com) and paste it (per video).
- Auto Resubscribe: Leave unchecked (for HTTPS sites, per video).
- Default Icon: Upload your site’s logo (e.g., 192x192px PNG, per video).
- Click Save.
- Copy Credentials:
- On the Web Configuration page, copy the App ID, REST API Key, and Safari Web ID (per video).
- Keep the dashboard open for Step 3.
Step 2: Install and Configure OneSignal Plugin
- Install Plugin:
- In your WordPress dashboard, go to Plugins > Add New.
- Search for OneSignal Push (official plugin, per video).
- Click Install Now, then Activate (per video).
- Alternative: Download from wordpress.org/plugins/onesignal-free-web-push-notifications/ and upload via Plugins > Add New > Upload Plugin.
- Configure Plugin:
- Go to OneSignal Push (new sidebar menu) > Configuration (per video).
- Paste the copied credentials:
- App ID: From OneSignal dashboard.
- REST API Key: From OneSignal dashboard.
- Safari Web ID: From OneSignal dashboard (optional for Safari support).
- Notification Settings (per video):
- Use Post Featured Image as Notification Icon: Uncheck (uses site logo, per video).
- Use Post Featured Image as Chrome Large Notification Image: Uncheck (optional).
- Hide Notification After a Few Seconds: Select No (per video).
- Show on macOS Only: Select No (per video).
- Enable Notification Title: Leave unchecked (optional).
- Enable Subscription Bell: Check to show a bell icon for subscribe/unsubscribe (per video).
- Automatically Prompt New Users with OneSignal Slide: Check to show native browser prompt (per video).
- Click Save.
- Verify Setup:
- Visit your site (e.g., yoursite.com).
- Confirm: A browser prompt appears, “We’d like to show you notifications for the latest news and updates” (per video).
- Click Allow to subscribe.
- Check: A bell icon appears (if enabled) for subscription management (per video).
Step 3: Create and Send a Push Notification
- Access OneSignal Dashboard:
- Return to dashboard.onesignal.com.
- Click Finish to complete setup (per video).
- Create New Push:
- Click New Push (per video).
- Campaign Name: Enter a name (e.g., “SPC Cloud Sale Campaign”, per video).
- Set Audience:
- Select Subscribed Users (all subscribers, per video).
- Alternative: Target segments (e.g., Inactive Users, Engaged Users, First Session) or create custom segments (e.g., by location, behavior).
- Optional: Exclude segments (e.g., inactive users).
- Select Subscribed Users (all subscribers, per video).
- Compose Message:
- Title: Add a title (e.g., “Big Sale at SPC Cloud!”, per video).
- Message: Write a message (e.g., “Shop new arrivals with 20% off!”).
- Icon: Uses default logo (set in Step 1) or upload a custom image (e.g., sale banner, per video).
- Launch URL: Add a URL for clicks (e.g., https://yoursite.com/new-arrivals, per video).
- Copy the URL from your site (e.g., new arrivals page) and paste it.
- Schedule (Optional):
- Select Send Immediately (per video) or schedule for a specific date/time.
- Enable Optimize Delivery (optional, for best user time zones).
- Review and Send:
- Click Review to preview (supports Chrome, Firefox, Safari, Edge, per video).
- Click Send Message (per video).
- Note: If no subscribers exist (as in video), notifications queue until users subscribe.
Step 4: Verify and Monitor
- Test Notification:
- Subscribe to notifications on your site (click “Allow” on the prompt).
- Send a test push from OneSignal.
- Confirm: Notification appears on desktop/mobile with title, message, and logo.
- Click: Verify it redirects to the specified URL (e.g., new arrivals page).
- Check Analytics:
- In OneSignal’s dashboard, go to Delivery or Audience.
- Monitor:
- Delivered: Number of users who received the notification.
- Clicked: Number of users who clicked the notification.
- Subscribed Users: Total subscribers and their engagement (e.g., active, inactive).
- Note: Analytics populate once subscribers engage (video notes no subscribers yet).
- Troubleshoot:
- Prompt Not Showing?:
- Ensure HTTPS is enabled (required for web push).
- Verify App ID and API Key in OneSignal Push > Configuration.
- Clear cache (from your “Backup and Migration” guide).
- Notifications Not Delivered?: Check browser permissions (Settings > Notifications) or re-subscribe.
- Bell Icon Missing?: Ensure Enable Subscription Bell is checked.
- Theme Conflicts?: Test with Neve or Storefront (from your “Neve” or “Creating Products” guides).
- Performance Issues?: OneSignal is lightweight, but cache pages excluding dynamic scripts.
- Prompt Not Showing?:
Step 5: Enhance with Optional Features
- OneSignal Features:
- Segments: Target users by behavior (e.g., “Inactive Users” for re-engagement).
- A/B Testing (Paid, $99+/month): Test different messages for higher click rates.
- Automation: Set up welcome notifications or drip campaigns.
- In-App Messages: Combine with push for hybrid engagement (requires app setup).
- WooCommerce Integration:
- Promote products via notifications (e.g., “20% off Flying Ninja!” with a shop link).
- Sync with Razorpay or UPI QR Code for seamless checkouts (from your “Razorpay” or “UPI Payment” guides).
- Pair with FiboSearch to drive traffic to new arrivals (from your “FiboSearch” guide).
- Customizations:
- Prompt Styling: Customize the bell icon or prompt in OneSignal’s Settings > Prompt Customization.
- CSS: Style the bell via Appearance > Customize > Additional CSS: cssCopy
.onesignal-bell-container { bottom: 20px; right: 20px; } - Icons: Use high-resolution images (256x256px) for crisp notifications.
- Analytics Integration:
- Connect to Google Analytics for click tracking (OneSignal > Settings > Analytics).
- Monitor subscriber growth in Audience tab.
Step 6: Best Practices
- Compliance:
- Follow GDPR/CCPA by requiring explicit consent (native browser prompt).
- Offer unsubscribe options via the bell icon (per video).
- Include a privacy policy link (from your “Privacy Policy” guide).
- User Experience:
- Avoid spamming; send 1-2 notifications/week (e.g., sales, updates).
- Use clear, concise messages (e.g., “New Arrivals! Shop Now”).
- Optimize for mobile (OneSignal supports responsive notifications).
- Testing:
- Test notifications across browsers (Chrome, Firefox, Safari).
- Use OneSignal’s preview feature before sending.
- Performance:
- OneSignal’s scripts are lightweight, but cache pages excluding notification scripts (from your “Backup and Migration” guide).
- Monitor load times with GTmetrix.
Pro Tips
- Boost Engagement: Promote notifications via a Welcome Bar (from your “Sticky Menu” guide) or Join.chat for support (from your “Join.chat” guide).
- WooCommerce Sync: Pair with Convertful for email+push campaigns (from your “Newsletter” guide).
- Security: Target verified users with Ultimate Member (from your “Email Verification” guide).
- SEO: Add notification CTAs to blog pages (from your “Blog Page” guide).
- Backup: Save OneSignal settings with UpdraftPlus (from your “Backup and Migration” guide).
- Styling: Match notifications to Neve’s design (from your “Neve” guide).
Congratulations
You’ve added web push notifications with OneSignal and 6fc Live! Your WordPress site now engages customers with real-time updates, boosting sales and interaction for your blog or WooCommerce store. Combine with your other guides (e.g., “Convertful,” “Razorpay,” “Neve”) for a dynamic platform. Need help with segments, automation, or troubleshooting? Comment below or visit onesignal.com/support/!