 |
Summary | Community Support - configurable donation |
 |
Preview | Theme Creator |
 |
Repository | GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub |
 |
Found it useful? | ./support --coffee |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Hello 
The goal was to make it flexible enough to fit very different community designs and use cases, while keeping the configuration entirely within the Theme Settings.
Features
Donation / support modal
The component can optionally display a support modal automatically.
The automatic modal supports:
- configurable opening delay
- URL/path-based visibility
- member/anonymous visibility
- minimum trust level
- excluded groups
- configurable dismissal cookie lifetime
- three modal sizes:
normal,large,maximized
The modal can also be opened manually from anywhere using:
#donate
This is intentionally independent from the automatic visibility rules, so a community can share a #donate link or add it to the sidebar while still controlling where automatic support prompts appear.
Donation / support methods
Multiple support methods can be configured using Discourse’s Objects setting editor.
Each method can have:
- name
- description
- provider
- owner
- icon
- URL
- button text
- copyable value
- featured state
- translations
This is provider-agnostic, so the component doesn’t require a specific payment provider.
For example, a method can simply point to an existing PayPal, Revolut, Wise or other payment/support page.
Per-method localization
Donation methods support their own translations.
The locale selector includes the available Discourse locales, and each method can have translated:
- name
- description
- button text
- copy label
- owner
- provider
If an exact locale isn’t available, the component falls back to the base locale and then to English/another available translation.
Support goal & progress bar
The component includes an optional support goal and progress bar.
You can configure:
- current amount
- target amount
- currency
- support label
- support period
- progress display
- where the support bar appears
Supported periods:
- one-time
- monthly
- yearly
The progress bar also handles over-goal support.
Instead of simply stopping at 100%, the actual percentage continues to be displayed:
75% → normal progress
100% → goal reached
125% → 25% into the next goal cycle
220% → 20% into the third goal cycle
The visual progress bar remains a single compact bar.
Before the first goal:
background: tertiary-low
fill: tertiary
At exactly 100%, 200%, 300%, etc.:
background: success
fill: success
Between milestones:
background: success-low
fill: success
This means a community can continue showing meaningful progress even when it significantly exceeds its original goal.
Supporter avatars
The support bar can optionally display supporter avatars.
Supporters are currently configured manually through the supporters Object setting.
Each supporter can have:
- username
- contribution amount
- currency
The username is resolved against the user profile, so the user’s profile/avatar information can be displayed automatically.
The number of avatars shown directly in the support bar is configurable.
For example:
◉ ◉ ◉ ◉ ◉ +8
If there are more supporters than the configured visible avatar count, the remaining supporters are accessible through a DMenu.
The supporter menu can display:
- avatar
- username
- profile link
- contribution amount
- currency
Contribution amounts can be enabled or disabled independently.
Supporters can also be populated from one or more groups using the supporter_groups setting. This complements the manually configured supporter list rather than replacing it.
Multiple designs
The component includes three independent visual designs:
- Classic: balanced community-style presentation
- Minimal: reduced visual chrome and compact presentation
- Modern: stronger hierarchy and more prominent cards
The design is independent from the selected view, so the two can be combined freely.
Multiple views
The component supports several presentation modes:
- Full: complete support content with hero, featured method and donation methods
- Compact: reduced presentation for smaller placements
- Minimal: method-focused presentation
- Progress: support goal and progress only
This allows the same component to be used in very different locations without duplicating configuration or styling.
Post embeds
Support content can be embedded directly into posts.
Enable enable_post_embed, then use:
[wrap=donate]
[/wrap]
Additional views are available directly through the wrapper:
[wrap=donate-compact]
[/wrap]
[wrap=donate-minimal]
[/wrap]
[wrap=donate-progress]
[/wrap]
The wrapper controls the view, while the global design setting controls the visual design.
This is useful when the support content needs to be part of the context of a particular post rather than appearing as a global UI element.
Plugin outlet support
The component can render the support widget through plugin outlets.
Enable outlet_enabled and specify the desired outlet names in outlet_locations, separated by |.
The outlet view and design can be configured independently:
outlet_viewoutlet_design
This makes it possible to use the support component in locations such as topic lists, headers, footers and other supported outlets.
Discourse Ads compatibility
The component can also be used with the Discourse Ads plugin.
Instead of depending directly on the Ads plugin, Community Support provides a stable HTML embed marker:
<div data-donation-widget="support"></div>
This can be copied into an HTML ad and placed into the desired Ads outlet.
The component owns the markup and CSS, so there is no need to duplicate the donation styling inside the ad itself.
The view and design can optionally be overridden:
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>
This means the same support system can be reused across different Ads placements while maintaining a consistent design.
Generic HTML embeds
The same embed mechanism can also be used in other HTML-capable placements:
<div data-donation-widget="support"></div>
The HTML marker remains intentionally simple while the Theme Component handles the actual rendering.
This makes it possible to change the design or component implementation without having to rewrite every individual embed.
Visibility controls
Automatic and globally rendered support content can be controlled through several settings:
- Show for members
- Show for anonymous users
- Minimum trust level
- Excluded groups
- Display on homepage
- URL/path matching
Excluded groups are applied to automatically rendered support content such as the modal, plugin outlet widgets and generic embeds.
Contextual content remains available:
#donate[wrap=donate]
This makes it possible to exclude certain users from promotional/automatic support UI without preventing them from accessing an explicitly shared support link or contextual support block.
Dismissal / cookie control
When the automatically opened modal is dismissed, the component can remember that decision.
The cookie lifetime can be configured as:
- none
- minute
- day
- week
- month
- year
This prevents the automatic modal from repeatedly appearing to the same visitor according to the selected lifetime.
Basic examples
Open the support modal
#donate
Embed support content in a post
[wrap=donate]
[/wrap]
Compact post version
[wrap=donate-compact]
[/wrap]
Generic HTML embed
<div data-donation-widget="support"></div>
Embed with custom presentation
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>