How to embed a button into a Topic Post

Development

AI-generated summary

UnitedFreedom introduces a method for embedding custom call-to-action buttons directly into Discourse topic posts to improve conversion rates for marketing campaigns. The solution involves adding specific SCSS code to the forum’s theme to style a [wrap="button"] shortcode, which renders as an inline button. The original post also demonstrates how to place text immediately after the button using a [wrap="text-after-button"] shortcode.

Following the initial post, Canapin created a comprehensive guide on customizing post contents with custom styles, inspired by UnitedFreedom’s work. jrgong contributed a CSS improvement to address layout issues where clicking slightly above or below the link text did not trigger the hyperlink. This update adjusts padding, overrides paragraph margins, and utilizes CSS variables for colors and borders to ensure the button behaves correctly within the cooked post hierarchy.

Finally, pacharanero developed a Theme Component based on the original CSS hack, offering an easier-to-use alternative for creating custom post buttons, though with less customization flexibility than manual CSS edits.

1

Introducing the amazing embedded button - the ultimate solution for spicing up your topic posts! With just a click, you can add a whole new dimension to your content and leave your readers in awe. Plus, our embedded button comes with a 100% satisfaction guarantee - if you’re not completely satisfied with its awesomeness, we’ll give you your money back (just kidding, it’s totally free)! So why wait? Get your hands on our embedded button today and join the cool kids’ club!

I have created some call-to-action topics to increase sign-ups on my Discourse forum. Each topic is for a different marketing campaign. But they all share one thing in common…I want them to sign up after reading it. So instead of breaking the flow of the readers eye, I have added a button directly into the post for their convenience, and increased conversion rates. But you can use the button for whatever you want! :slight_smile:

Preview

image
image964×520 36.4 KB


How to Enable

  1. Add the custom CSS to your current theme.
[data-wrap="button"] a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #FFF !important;
    background-color: #007bff;
    border-color: #007bff;
}

// Part #1 Allows text to be displayed to the right of a button.
[data-wrap="button"] {
    display: inline-block;
}

// Part #2 Allows text to be displayed to the right of a button.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. In your posts, copy
[wrap="button"][Get Started](https://example.com)[/wrap]

Or if you want text next to your button, try this…

[wrap="button"][Sign Up](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- Click Here to get sign up to my discourse![/wrap]
2

very nice, thank you.

4

Hey @UnitedFreedom!

Your topic inspired me to create a proper topic about such modifications :+1:

You can read it here guys: Customize posts' contents with your own styles

5

I’m glad I was able to inspire you. You made a very easy to follow topic with pictures. Love it :slight_smile:

6

Quick CSS improvement from our side:

Since the HTML output is slightly different inside a cooked post for “wrap-buttons”, we adjusted the CSS markup since the a tag inside the div > p hierarchy contains the link and therefore clicking the button slightly above or below the link doesn’t trigger the link.

We managed to work around that to add more padding around the a tag and override the margin-block markup of the <p> tag.

Also, the link color had to be adjusted.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}
7

Inspired by this CSS hack from the OP, I have made this Theme Component which gives you Custom Buttons. Nowhere near as customisable as your own CSS, but very much easier.

Thanks to the OP for the great idea.