CTA Button GeneratorCTA Generator

Platform Guide

How to Add a CTA Button to Ghost

Add a floating call-to-action button to your Ghost blog using code injection.

Ghost is a popular CMS for bloggers and publishers, and it has a built-in code injection feature that makes adding a floating CTA button easy. Design your button with the generator, export the code, and paste it into Ghost's site footer injection — no theme editing needed.

Why Add a CTA Button to Ghost?

Ghost is built for publishers and content creators who monetize through subscriptions, newsletters, and memberships. A floating CTA button that says "Subscribe," "Join Free," or "Become a Member" stays visible as readers scroll through long-form articles, capturing signups at the moment of peak engagement rather than only at the end of a post.

Step-by-Step Instructions

01

Design your CTA button

Open the CTA Button Generator and customize your button using the visual editor. Pick colors, position, animation, hover effects, icon, and font. The live preview updates in real time so you see exactly what your visitors will get.

02

Export your code

When you are happy with the design, click "Get Code" to export a clean HTML + CSS snippet. The code is lightweight, has zero dependencies, and works on any website.

03

Open Ghost code injection

In your Ghost admin panel, go to Settings > Code injection. You'll see two fields: "Site Header" and "Site Footer".

04

Paste the code in the Site Footer field

Paste your CTA button code into the "Site Footer" field. This injects it before the closing </body> tag on every page of your Ghost site.

<!-- Paste your CTA button code in the Site Footer field -->
05

Save and verify

Click Save, then visit your Ghost site. The floating CTA button should appear on all pages, including blog posts.

Best Practices for Ghost

  • Link the button to Ghost's built-in membership signup (#/portal/signup) to leverage Ghost's native subscription system.

  • Use the Site Footer injection field so the button loads after the page content for better perceived performance.

  • Choose a button color that contrasts with your Ghost theme's background to stand out without looking out of place.

  • If you use Ghost's built-in portal popup, position the CTA button away from the bottom-right corner where the portal icon appears.

Ready to build your button?

Design it visually, export clean code, and paste it into your site.

Open the Generator

Frequently Asked Questions

Does Ghost support code injection on all plans?

Yes. Code injection is available on all Ghost plans, including the free self-hosted version and all Ghost(Pro) tiers.

Will the button appear on individual blog posts?

Yes. Code injected via the Site Footer appears on every page, including individual blog posts, the homepage, and tag/author pages.

Can I link the CTA button to Ghost's membership portal?

Yes. Set the button's link to #/portal/signup or #/portal to open Ghost's built-in membership signup modal directly from the floating button.

Will the button overlap with Ghost's default portal button?

It can if both are positioned in the bottom-right corner. Either move your CTA button to a different position or disable Ghost's default portal icon in the Portal settings.