How can I change the link of the signup CTA? Because I have SSO active and it currently does like a “sign in” button instead of a “sign up”. So I want to change the link with my real sign up link of Memberful.
1 Like
There might be more efficient ways to do this
but… one is to modify the template.
The template lives at:
And to override it you can change
{{d-button action="showCreateAccount" label="signup_cta.sign_up" icon="check" class="btn-primary"}}
To something like:
<a href="https://foo.bar" target="_blank">Sign up</a>
In the following:
<script type="text/x-handlebars" data-template-name="components/signup-cta">
<div class="signup-cta alert alert-info">
{{#if session.hideSignupCta}}
<p>
{{i18n "signup_cta.hidden_for_session"}}
</p>
{{else}}
<p>{{replace-emoji (i18n "signup_cta.intro")}}</p>
<p>{{replace-emoji (i18n "signup_cta.value_prop")}}</p>
<div class="buttons">
{{d-button action="showCreateAccount" label="signup_cta.sign_up" icon="check" class="btn-primary"}}
{{d-button action="hideForSession" label="signup_cta.hide_session" class="no-icon"}}
<a {{action "neverShow"}}>{{i18n "signup_cta.hide_forever"}}</a>
</div>
{{/if}}
<div class="clearfix"></div>
</div>
</script>
And then add it to the </head> section of a theme.
Let me know if you need more help.
2 Likes
Ok I changed it but I don’t know how to check if it worked?
Also, if an anonymous user want to reply or do anything at all, it always convert to the “sign in” form. Can I change all that to the “sign up” form (link to memberful)? Like I did with the signup CTA.
You can either sign out of your account and browser the site a bit until you see it or you can force it to display by temporarily modifying another template.
for example:
If you add this
<script type="text/x-handlebars" data-template-name="application">
{{plugin-outlet name="above-site-header"}}
{{site-header canSignUp=canSignUp
showCreateAccount=(route-action "showCreateAccount")
showLogin=(route-action "showLogin")
showKeyboard=(route-action "showKeyboardShortcutsHelp")
toggleMobileView=(route-action "toggleMobileView")
toggleAnonymous=(route-action "toggleAnonymous")
logout=(route-action "logout")}}
{{plugin-outlet name="below-site-header" args=(hash currentPath=currentPath)}}
<div id="main-outlet" class="wrap">
<div class="container">
{{#if showTop}}
{{custom-html name="top"}}
{{/if}}
{{global-notice}}
{{create-topics-notice}}
</div>
{{outlet}}
{{outlet "user-card"}}
</div>
{{signup-cta}}
{{plugin-outlet name="above-footer" args=(hash showFooter=showFooter)}}
{{#if showFooter}}
{{custom-html name="footer" triggerAppEvent="true"}}
{{/if}}
{{plugin-outlet name="below-footer" args=(hash showFooter=showFooter)}}
{{outlet "modal"}}
{{topic-entrance}}
{{outlet "composer"}}
</script>
You should see the CTA from in the footer of every page. You can then make any changes you want. Once you’re done testing just delete this template override.
Yes this is also possible to do in the same fashion, however, it’s probably more efficient to use a plugin outlet to inject a new button and use CSS to remove the default button.
I will check on this tomorrow.
Thanks a lot. So the “sign up” link is not where it should be.
This is the code :
<script type="text/x-handlebars" data-template-name="components/signup-cta">
<div class="signup-cta alert alert-info">
{{#if session.hideSignupCta}}
<p>
{{i18n "signup_cta.hidden_for_session"}}
</p>
{{else}}
<p>{{replace-emoji (i18n "signup_cta.intro")}}</p>
<p>{{replace-emoji (i18n "signup_cta.value_prop")}}</p>
<div class="buttons">
<a href="https://lepeuplier.memberful.com/checkout?plan=27167" target="_blank">Sign up</a>
{{d-button action="hideForSession" label="signup_cta.hide_session" class="no-icon"}}
<a {{action "neverShow"}}>{{i18n "signup_cta.hide_forever"}}</a>
</div>
{{/if}}
<div class="clearfix"></div>
</div>
If someone know how to make it a button like the default sign up button. And place it in the left side of the reminding button.
Thanks!
Here’s what you need to make the link look like a button:
<script type="text/x-handlebars" data-template-name="components/signup-cta">
<div class="signup-cta alert alert-info">
{{#if session.hideSignupCta}}
<p>
{{i18n "signup_cta.hidden_for_session"}}
</p>
{{else}}
<p>{{replace-emoji (i18n "signup_cta.intro")}}</p>
<p>{{replace-emoji (i18n "signup_cta.value_prop")}}</p>
<div class="buttons">
<a target="_blank" id="sso-signup" class="btn-primary btn-primary btn btn-icon-text" href="https://google.com">
{{d-icon "check"}}<span class="d-button-label">sign up</span>
</a>
{{d-button action="hideForSession" label="signup_cta.hide_session" class="no-icon"}}
<a {{action "neverShow"}}>{{i18n "signup_cta.hide_forever"}}</a>
</div>
{{/if}}
<div class="clearfix"></div>
</div>
</script>
and this CSS:
#sso-signup {
float: none;
text-decoration: none;
}
Just make sure you change the href above and the wording for signup
. It looks like this now:
As for the second part:
First you need this CSS to hide the default button:
.anon #topic-footer-buttons button {
display: none;
}
Then you need this to inject a new button/link
<script type='text/x-handlebars' data-template-name='/connectors/topic-above-suggested/add-sso-button'>
<a target="_blank" id="sso-reply" class="btn-primary btn-primary btn btn-icon-text" href="https://google.com">
{{d-icon "reply"}}<span class="d-button-label">Reply</span>
</a>
</script>
And it would look like this:
Again, make sure you change the label and href in the code your needs.
Let me know if you need more help.
3 Likes
Thanks so much for your time! Very appreciated 
2 Likes
I was able to fix the double buttons by using this
#sso-reply {
display: none;
}
.anon #sso-reply {
display: inline;
}Hi，Johani, i want to change the text in signup CTA,
can you tell me how to custom the text in this pic
Search for that text string in Admin, Customize, Text.
3 Likes
Hello I tried the same.
I tried to update Signup with Join
but it’s not reflecting on front-end. Can you pelase help!