CTA Snippets
CTA (Call-to-Action) Snippets are reusable HTML blocks that get injected into your articles during WordPress publishing. Use them to promote lead magnets, free trials, product pages, or newsletter signups without editing every article by hand.
Where to Find CTAs
Navigate to Project Management → CTAs tab. This tab lets you create, edit, preview, and manage all your CTA snippets.
Creating a CTA
Manual Creation
- Enter a CTA Name (e.g. "Free Trial Banner").
- Choose a Placement (see table below).
- Optionally check 🌐 Global to make this CTA available across all projects.
- Write your HTML in the code editor.
- Click + Add CTA.
AI-Powered Generation
Click 🪄 Generate with AI to open the AI CTA wizard. Fill in four fields:
| Field | Required | Description |
|---|---|---|
| Color Scheme | No | Describe the visual style, e.g. "vibrant purple gradient" or "minimalist black" |
| Destination URL | Yes | Where the CTA button links to |
| Purpose | Yes | What this CTA promotes, e.g. "Free trial signup" or "Download our guide" |
| Button Text | No | Custom button label, e.g. "Start Free Trial" |
You can also toggle ✨ Add animations to include hover effects and subtle motion in the generated HTML.
Click 🚀 Generate CTA and the AI produces a styled HTML snippet ready to use. The generated code appears in the editor where you can tweak it before saving.
Note: The AI generator requires at least one API key configured (OpenAI, Claude, or Gemini).
Placement Options
Each CTA has a placement setting that controls where the snippet appears in published articles:
| Placement | Icon | Behavior |
|---|---|---|
| Bottom | 📍 | Appended to the end of the article |
| Random | 🎲 | Inserted between two random H2 sections |
| After Intro | 📖 | Placed immediately after the first paragraph |
Choose placement based on your conversion goals. Bottom CTAs work well for readers who finish the full article. After-intro placement catches early attention. Random placement distributes CTAs throughout longer content.
Live Preview
As you write or edit HTML, the Live Preview panel on the right renders your CTA in real time. This shows exactly how the snippet will look in an article.
The preview automatically strips markdown code block wrappers (```html) if the AI generator included them.
Managing Existing CTAs
Each saved CTA shows up in the Your CTAs list with these controls:
| Action | What it does |
|---|---|
| 👁️ Preview | Toggle a live preview of the CTA's rendered HTML |
| ✓ Active / ○ Inactive | Toggle whether this CTA gets injected during publishing |
| ✏️ Edit | Open inline editing for name, placement, and HTML content |
| 🗑️ Delete | Remove the CTA permanently |
Active vs. Inactive
Only active CTAs are injected during WordPress publishing. Inactive CTAs are saved but skipped. This lets you prepare seasonal CTAs ahead of time and activate them when needed.
Global CTAs
CTAs marked as 🌐 Global appear across all projects. Project-specific CTAs only apply to articles generated within that project.
Example CTA HTML
Here's a simple CTA you can use as a starting point:
<div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 32px; border-radius: 16px; text-align: center; margin: 32px 0;">
<h3 style="color: white; font-size: 24px; margin: 0 0 12px;">Ready to Get Started?</h3>
<p style="color: rgba(255,255,255,0.9); margin: 0 0 20px;">Join thousands of content creators using AI to publish faster.</p>
<a href="https://example.com/signup" style="display: inline-block; background: white; color: #667eea; padding: 12px 32px; border-radius: 8px; font-weight: bold; text-decoration: none;">Start Free Trial</a>
</div>
Use inline styles since WordPress may not load external stylesheets for injected content.