CTA Components

Call-to-action components for use in blog posts and landing pages. Configure via frontmatter with bottomCTA and sidebarCTA fields.

Full-Width CTAs

Used at the bottom of blog posts. Set via bottomCTA: {id} in frontmatter.

bottomCTA: 1Type: default

Descubre qué cuentas prosperan y cuáles están en riesgo

Descubre qué cuentas prosperan, cuáles están en riesgo y qué cambió, con señales claras de uso del producto.

Reservar Demo Comenzar Prueba Gratis

bottomCTA: 2Type: cards

Conoce qué clientes están en riesgo

Descubre qué cuentas prosperan, cuáles están en riesgo y qué cambió, con señales claras de uso del producto.

Comenzar Reservar Demo

Documentación

Aprende cómo aprovechar al máximo Accoil.

Guía de Salud del Cliente

La guía completa del engagement del cliente.

bottomCTA: 13Type: accent

¿Listo para entender mejor a tus clientes?

Únete a los equipos que usan Accoil para detectar riesgos temprano, guiar usuarios al valor y encontrar oportunidades de expansión.

Comenzar Prueba Gratis Hablar con Ventas

Sidebar CTAs

Compact versions for the blog sidebar. Set via sidebarCTA: {id} in frontmatter. Only CTAs marked as sidebarCompatible will render.

sidebarCTA: 1

Descubre qué cuentas prosperan y cuáles están en riesgo

Descubre qué cuentas prosperan, cuáles están en riesgo y qué cambió, con señales claras de uso del producto.

Reservar Demo Comenzar Prueba Gratis

sidebarCTA: 2(not compatible)

Not sidebar compatible

sidebarCTA: 13

¿Listo para entender mejor a tus clientes?

Únete a los equipos que usan Accoil para detectar riesgos temprano, guiar usuarios al valor y encontrar oportunidades de expansión.

Comenzar Prueba Gratis Hablar con Ventas

Usage in Blog Posts

---
title: "Your Blog Post"
description: "Post description"
date: "2025-01-15"
# ... other frontmatter

# CTA Options
bottomCTA: 13        # Accent-style CTA at bottom
sidebarCTA: 1        # Compact CTA in sidebar
hideTOC: false       # Show table of contents (default)
---

Your content here...

Adding New CTAs

To add a new CTA, update the registry and add translations:

// 1. Add to src/components/sections/shared/cta-registry.tsx
const ctaRegistry: Record<number, CTAConfig> = {
  1: { type: 'default', sidebarCompatible: true },
  2: { type: 'cards', sidebarCompatible: false },
  13: { type: 'accent', sidebarCompatible: true },
  // Add your new CTA:
  14: { type: 'default', sidebarCompatible: true },
};

// 2. Add translations via CLI:
npm run i18n -- set common.ctas.cta14.heading "Your heading" --locale=en
npm run i18n -- set common.ctas.cta14.description "Description" --locale=en
npm run i18n -- set common.ctas.cta14.primaryCta "Primary Button" --locale=en
npm run i18n -- set common.ctas.cta14.primaryUrl "/your-url" --locale=en
npm run i18n -- set common.ctas.cta14.secondaryCta "Secondary" --locale=en
npm run i18n -- set common.ctas.cta14.secondaryUrl "/other-url" --locale=en

// Repeat for other locales (es, de, fr)

Available Types

Type	Description	Sidebar Compatible
`default`	Simple CTA with heading, description, and buttons in a bordered card	Yes
`accent`	Full-width CTA with accent background color	Yes
`cards`	Two-column layout with linked resource cards	No