Change link signup CTA


(François Douville) #1

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.


Call to action not displaying
(Joe) #2

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.


(François Douville) #3

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.


(Joe) #4

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.


(François Douville) #5

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>

(François Douville) #6

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!


(Joe) #7

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.


(François Douville) #8

Thanks so much for your time! Very appreciated :smiley:


(François Douville) #9

I add it to my forum and it add the button even for members. I have now 2 buttons.


(David Kingham) #10

I was able to fix the double buttons by using this

#sso-reply {
    display: none;
}
.anon #sso-reply {
    display: inline;
}