How to embed a button into a Topic Post

Dev
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]
14 Likes
2

very nice, thank you.

2 Likes
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

2 Likes
5

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

2 Likes
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;
}