Add Login / Signup Buttons to custom HTML

Product Support

AI-generated summary

Jon_M is using the Banner Themes plugin to display custom HTML content for anonymous users, encouraging them to create an account. They want to add a “sign up” button and redirect to the signup page using a “Discourse native” method. Instead of a simple web redirect, they’re trying to use JavaScript inside a type="text/discourse-plugin" script to show the signup modal. They’re looking for a straightforward way to execute the equivalent of {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}} without using a handlebars script.

1

I am using Banner Themes (https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368) to show some HTML content for anonymous users. Largely just encouraging them to create and account.

I am trying to add a “sign up” in the middle of my content. In general it’s been pretty simple to just create a button and then on click redirect to .xyz Domain Names | Join Generation XYZ and handle it as a regular web redirect. [Either via JS / simple ‘form’ post / href redirect etc…]

I have been trying to see if I could utilize a more “Discourse native” way of doing this action. I have closely followed the Developer’s guide to Discourse Themes. Somewhere between widgets, controllers, components, I ran into a question:

What is the most straightforward way using Javascript (inside a type=“text/discourse-plugin” script) to “show the signup modal”? To be very clear, I’m trying to execute this outside of a handlebars script like this:

{{d-button action=(route-action “showCreateAccount”) class=“btn-primary sign-up-button” label=“sign_up”}}

Ultimately something like this… I’m trying to figure out what to replace the bold with:

<script type="text/discourse-plugin"version=“0.8.18”>
document.getElementById(“showCreate”).onclick = function() {
{{d-button action=(route-action “showCreateAccount”) class=“btn-primary sign-up-button” label=“sign_up”}}
}
</script>

Everything that I have tried throws different errors but mostly around it just not understanding the “action”. I tried searching Meta and while there are lots of examples for how to create a new widget or to place this somewhere else, I couldn’t find a way to do it natively. Any help would be greatly appreciated.

(ps. I’m not saying this is the best way or necessary way to make this work but it would greatly help me understand how the entire app hangs together)

Thanks!

1 Like