I wanted to know if it’s possible to edit the message “This post is for paying subscribers only” (see screenshot below) since I’m not on a creator plan.
What this does is basically waiting for the content on the page to load, then select the h2 element from within the upgrade CTA, and finally change the text content there.
Sure! They are all just HTML elements, so you can change them all.
<script>
document.addEventListener('DOMContentLoaded', function() {
const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');
if (h2Element) {
h2Element.textContent = 'Your New H2 Message Here';
}
if (buttonElement) {
buttonElement.textContent = 'Your New Button Text Here';
}
if (smallTextElement) {
smallTextElement.innerHTML = 'Your New Small Text Here';
}
});
</script>
For the small text, you need to insert any links etc. with HTML. Have a look at the original source code to understand how to do that:
<div class="gh-post-upgrade-cta-content" style="background-color: #FF1A75">
<h2>This post is for subscribers only</h2>
<a class="gh-btn gh-portal-close" data-portal="signup" style="color:#FF1A75">Subscribe now</a>
<p><small>Already have an account? <a data-portal="signin" class="gh-portal-close">Sign in</a></small></p>
</div>
The <p><small>...</small></p> weren’t necessary, since we are already changing everything within the <small>...</small> tag.
I tried the text you wrote on one of my test sites and found another issue. The data-portal attribute doesn’t work, since we load this code injection after the DOM is loaded.
So, we need to create the URL ourselves. Experimented a bit and this worked in my test site:
<script>
document.addEventListener('DOMContentLoaded', function() {
const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');
if (h2Element) {
h2Element.textContent = 'Your New H2 Message Here';
}
if (buttonElement) {
buttonElement.textContent = 'Your New Button Text Here';
}
if (smallTextElement) {
// Construct the relative URL dynamically
const signInUrl = window.location.href + '#/portal/signin';
smallTextElement.innerHTML = 'Vous avez déjà un compte? <a href="' + signInUrl + '" class="gh-portal-close">Connectez-vous</a>';
}
});
</script>
Edit: I’d missed that these are part of the theme. Theme translations are separate to the core Portal app translations so the toggle won’t translate these theme buttons
I am not entirely sure what you’re asking, sorry. Are the custom messages not working somewhere? That might be due to the CSS classes being the same for the CTAs.
A live link would really help debug these kind of things.
Try reloading the page or clearing your cache. In my browser, your site clearly displays a subscribe button in French. Also, you don’t have to duplicate the line of code in the site footer.