[Alex]

Alex #2685

Hi,

I’ve noticed that on the website, whenever someone donates on your ko-fi profile, there’s a real-time toast notification that pops up for all online visitors.

This feature is awesome and really helps encourage more donations by showing activity in real time!

I’m curious, how did you implement this system?
Is it built using a particular service for broadcasting these real-time notifications to all connected users?

Are there any best practices, frameworks, or services you’d recommend for achieving this kind of feature on other websites, like WordPress?

I’d love any insights you can share, especially for developers who want to add something similar to their own sites (even if just general advice or an overview).

Thanks so much!

[DVLotteryUSA]

DVLotteryUSA #2686

Hi!

Thank you for noticing the donation alerts and for the kind words! Real-time engagement like this can really boost community energy and support. I’m happy to share some general advice and strategies on how this type of feature is typically achieved.

General Approach:
The core idea is to listen for new donation events from the Ko-fi platform (or any payment provider that supports webhooks), then display those to your website visitors in a timely, non-intrusive way.

Main Components:
Webhook Integration: Most platforms like Ko-fi allow you to set up a webhook—essentially, they notify your site’s server whenever a donation occurs. Your server processes this incoming event and makes the relevant data available for your front end.

Frontend Notifications: On the visitor’s side, a lightweight script regularly checks for any new donation activity. If a new donation is detected, a notification (toast) is shown in real-time. The check can be via polling or push-based, depending on the setup.

Short-term Caching: To keep everything efficient and avoid duplication, the most recent event is typically cached for a short period. This ensures that all users online around the same time see the activity, but it won’t spam returning visitors.

Best Practices & Suggestions:

Security: Always ensure that any incoming webhook requests are properly verified, so only genuine events are processed.

Efficiency: Use minimal front-end resources (a small JS snippet or toast library) and avoid aggressive polling to keep server loads low.

User Experience: Randomize the timing of update checks a bit, so not all visitors hit your endpoint at once—this can help with scalability.

Tech Stack: There are multiple ways to achieve real-time notifications, including AJAX polling, Server-Sent Events, or WebSocket solutions. Each has its pros and cons depending on your site’s complexity and traffic.

On WordPress:
WordPress offers a lot of flexibility here. Custom plugins or lightweight add-ons can provide the webhook endpoint, handle the event processing, and enqueue the JS for notifications. There are also third-party libraries and notification frameworks that can help if you want to build or extend similar features.

I hope this overview helps point you in the right direction! If you’re considering building something like this, I’d recommend exploring Ko-fi’s webhook docs and reviewing notification solutions that fit your site’s stack and traffic levels. Happy to chat further if you have any follow-up questions!