Add a Sign up button (memberful purchase link) in header and disappear when log in

Support

AI-generated summary

Add a Sign up button (memberful purchase link) in header and disappear when log in

Francois_Douville wants to add a “sign up” button in the header that disappears when a member logs in. dax suggests using the .anon class to make the button appear only to users not logged in. Francois_Douville confirms this approach works.

Alternatively, angus proposes using the plugin api in a header script to add the button. This method allows for more control over the button’s placement in the DOM tree, making styling easier. angus provides an example of the necessary javascript code to add the button.

1

I have the memberful integration with Discourse. When SSO is active, the sign up button disappear. Only the “sign in” button of Discourse is showing and convert to the Memberful’s sign in form.

I will add a “sign up” button with some CSS codes in the header. My question is : how to make this button disappear when a member is log in? I want the same thing that happen to the current “sign in” button of Discourse, it is hiding when a member log in.

2

Just make it appear only to users not logged in using the .anon class, take a look here as example Banner Topic on home page and only for anonymous users

3

Thanks! It is working perfectly!

4

A note for future readers.

The approach mentioned by @dax works fine, however another approach you can take to add a Sign Up button when SSO is active is to use the plugin api in a header script.

The advantage of using the plugin api is that you can insert the button in the right part of the DOM tree to make styling easier.

This issue arose in the context of getting @Francois_Douville’s button to play nicely with the Header Search Theme (see here).

In @Francois_Douville’s case, the appropriate javascript to add the button is:

<script type="text/discourse-plugin" version='0.8.12'>
api.decorateWidget('header-buttons:before', function (helper) {
    if (!api.getCurrentUser()) {
        let rawLabel = helper.widget.site.mobileView ? "S'inscrire" : "S'inscrire gratuitement";
        return helper.attach('link', {
            href: 'https://lepeuplier.memberful.com/checkout?plan=27167',
            rawLabel,
            className: "btn btn-primary btn-small login-button"
        });
    }
});
</script>