Please could a @staff member consider moving this into Customization > Theme component, I am unable to create new topics there.
 |
Summary | Discourse Custom Post Button turns links inside Discourse posts into styled buttons. |
 |
Repository | github.com/koloki-co/discourse-custom-post-button |
 |
Install guide | Installing a theme or theme component |
 |
New to Discourse themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
This is a community theme component maintained by Koloki Ltd. It is not an official Discourse component. It’s in alpha, so there could be bugs. Please report bugs and request features in the GitHub repository.
Screenshots
Buttons
A specific use case: an ‘Ask us a question by PM’ Button
Features
- Turns a normal link into a button anywhere in a topic or post using
[wrap]. - Provides TC-level configurable default background colour, border radius, padding, font weight, text colour, and hover opacity, otherwise uses your site defaults.
- Allows an individual button to override the default background colour.
- Supports explanatory text alongside a button.
- Keeps the underlying content as a normal link, so buttons can open external pages or internal Discourse routes such as
/new-message.
IMPORTANT: If this TC is installed, any user on your forum can create these buttons. To gate the button capability on certain users would require a full Plugin. However, in practice, users need to know it’s installed and how to create a button so I suspect few will actually know how to do it. You can also use Watched Words to filter posts with
[wrap=custom-button]in them for approval, which would gate the functionality.
Installation
In Admin > Appearance > Themes & components, open the Components tab, select Install, and choose Install from a Git repository URL. Use:
https://github.com/koloki-co/discourse-custom-post-button
After installation, add the component to each active theme where it should be available.
Usage
Basic button
Default button colour from the TC settings will be used
[wrap=custom-button][Your Custom Button Text](https://example.com)[/wrap]
Per-button colour setting
[wrap=custom-button color=#7CC146][Your Custom Button Text](https://example.com)[/wrap]
Button followed by explanatory text
[wrap=custom-button][Your Custom Button Text](https://example.com)[/wrap]
[wrap=text-after-button]Additional explanatory text[/wrap] (on a new line)
Open a private message to a group
(NB: This uses inbuilt Discourse functionality to open the Composer with prefilled text - that part of the functionality is not coming from the Theme Component, I’m just using it to demo a possible use case. Requires the Group settings to allow PMs to that group.)
[wrap=custom-button][Ask Us a Question](/new-message?groupname=somegroup&title=Aask%20Us&body=Please%20type%20your%20question%20here.)[/wrap]
Use the group’s slugified name rather than its ‘Full Name’ and URL-encode parameter values. The group’s Who can message this group? setting still determines who can open an addressed composer, and signed-out visitors will be asked to log in.
Settings
| Setting | Purpose |
|---|---|
button_default_color |
Default button background and border colour |
button_border_radius |
Button corner radius |
button_padding |
Space around the button label |
button_font_weight |
Button label weight |
button_text_color |
Button label colour |
button_hover_opacity |
Button opacity on hover |
The component also exposes an svg_icons setting for available theme icons, but it does not currently insert an icon into a post button. I’ll add that feature if there is demand for it.
Notes
- The component changes presentation only. Buttons remain links and destination permissions are unchanged.
- Email clients and other contexts that do not load the active Discourse theme may display the underlying link without button styling.
- The component is licensed under the MIT License.
The component grew from the same useful [wrap] pattern discussed in How to embed a button into a Topic Post.
