Changing post upgrade CTA with code injection (Casper)

Themes
1

Hey everyone,

I’m trying to find a JavaScript that can change the standard text of the CTA at the bottom of a free post (in Casper) by using Code Injection.

It’s the text that says, “This post is for subscribers only.”

My problem is that visitors don’t understand that they can actually read-on for free if they just sign up. The text simply isn’t clear enough on the fact that it’s a free post, so I want to specify that.

I have searched a bunch of sites on JavaScript, and I have tried more than ten different solutions, but none of them seem to work.

So, do any of you have an idea of how to fix it?

Thank you so much in advance!

2

To change the CTA text, try adding the following to your Site Footer/Code Injection.

<script>
 const cta = document.querySelector(".gh-post-upgrade-cta-content h2")
 if (cta) {
    cta.textContent = "Your custom CTA title"
 } 
</script>

The other way to do this, which gives you full control on how this CTA appears is to customize the template for it by making a file called content-cta in your theme. See the link for more info.

3

Thanks, Ryan. It works! I think it’s the “if-construction” of your script that does the trick. That wasn’t part of my other attempts.

Now, however, I’m facing the problem of making the script distinguish between a free membership, a paid membership, and a third paid tier.

I’m wondering if it can be done using an “append” code in the script?

I understand that I could customize the template, but the whole maneuver here is to avoid opening that door strategically, so I want to see how far I can get with Code Injection.

Nonetheless, thanks for your time and advice!

4

I found the answer myself by simply adding a + before the = in the script. That allows me to append to the existing text of the CTA. The script now looks like this,

<script>
/* Post CTA starts here */
 const cta = document.querySelector(".gh-post-upgrade-cta-content h2")
 if (cta) {
    cta.textContent += "Your custom CTA title"
 } 
/* Post CTA ends here */
</script>

Then I researched and experimented a bit more and found this way of controlling the whole text area using prepend and append,

<script>
/* Post CTA starts here */
 const cta = document.querySelector(".gh-post-upgrade-cta-content h2")
 if (cta) {
    cta.prepend("Your custom text before existing text");
    cta.append("Your custom text after existing text"); 
 } 
/* Post CTA ends here */
</script>

Thanks again so much for your help @RyanF. Couldn’t have moved on without it.
I love collective consciousness…;)

1 Like
5

I’m now looking to replace the word “subscribers” with the word “members” in the text string, but as part of the above code. Have tried a few things, but none work. Any ideas of how to do it?

6

Try adding cta.textContent = cta.textContent.replace("subscribers", "members") before the prepend/append lines.

1 Like
7

YES! It worked @RyanF
You are a master!
Thank you so much. Totally awesome!
I really learned from this one. ;)

I added a replace of the button as well, so it says “Sign up now” instead of “Subscribe now”. So, in total, the code now looks like this,

<script>
/* Post CTA starts here */
 const cta = document.querySelector(".gh-post-upgrade-cta-content h2")
 if (cta) {
    cta.textContent = cta.textContent.replace("subscribers", "members");
    cta.prepend("My awesome text before existing text... ");
    cta.append("My awesome text after existing text... ");
 } 
 const btn = document.querySelector(".gh-post-upgrade-cta a.gh-btn")
 if (btn) {
    btn.textContent = "Sign up now";
 }  
/* Post CTA ends here */
</script>
3 Likes