> ## Documentation Index
> Fetch the complete documentation index at: https://docs.testly.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Call-to-Action

> Como testar botões, formulários e CTAs para maximizar conversões com o Testly

## Visão Geral

CTAs são os elementos mais testados em qualquer produto — pequenas mudanças de texto ou cor podem ter grande impacto:

* ✅ Impacto direto na taxa de conversão
* ✅ Simples de implementar e medir
* ✅ Resultados rápidos (tráfego concentrado no elemento)

Neste guia, você aprenderá a testar:

1. Texto do botão
2. Cor e estilo
3. Formulários de captura de lead

***

## Exemplo 1: Texto do Botão

O texto é o fator que mais impacta a taxa de clique em CTAs.

### Criar o experimento no dashboard

1. Acesse o [dashboard do Testly](https://app.testly.com.br)
2. Clique em **"Novo Experimento"**
3. Nome: `cta-button-text`
4. Variantes:
   * **Controle**: "Começar Grátis"
   * **Variante B**: "Criar Minha Conta"
   * **Variante C**: "Experimentar por 14 Dias"

### Implementação

```tsx components/CTAButton.tsx theme={null}
'use client';

import { useExperiment } from '@testlyjs/react';

interface CTAButtonProps {
  destination?: string;
  className?: string;
}

export function CTAButton({ destination = '/signup', className = '' }: CTAButtonProps) {
  const { variant, loading, convert } = useExperiment('cta-button-text');

  if (loading) {
    return (
      <div className={`h-12 bg-gray-200 rounded-lg animate-pulse ${className}`} />
    );
  }

  const labels = {
    'control': 'Começar Grátis',
    'variant-b': 'Criar Minha Conta',
    'variant-c': 'Experimentar por 14 Dias',
  };

  const handleClick = () => {
    convert('cta_button_clicked');
    window.location.href = destination;
  };

  return (
    <button
      onClick={handleClick}
      className={`bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors ${className}`}
    >
      {labels[variant as keyof typeof labels] || labels.control}
    </button>
  );
}
```

<Tip>
  Use o mesmo componente `<CTAButton>` em múltiplos lugares da página — todos exibirão a mesma variante para o mesmo usuário (atribuição é determinística por `userId`).
</Tip>

***

## Exemplo 2: Cor do Botão

Cor tem impacto menor que texto, mas ainda vale testar em páginas de alto tráfego.

```tsx components/CTAButtonColor.tsx theme={null}
'use client';

import { useExperiment } from '@testlyjs/react';

export function CTAButtonColor() {
  const { variant, convert } = useExperiment('cta-button-color');

  const colorStyles = {
    'control': 'bg-blue-600 hover:bg-blue-700',
    'variant-b': 'bg-green-600 hover:bg-green-700',
    'variant-c': 'bg-orange-600 hover:bg-orange-700',
  };

  const handleClick = () => {
    convert('cta_clicked');
    window.location.href = '/signup';
  };

  return (
    <button
      onClick={handleClick}
      className={`text-white px-8 py-3 rounded-lg font-semibold transition-colors ${
        colorStyles[variant as keyof typeof colorStyles] || colorStyles.control
      }`}
    >
      Começar Grátis
    </button>
  );
}
```

<Note>
  **Isolamento**: Teste cor e texto em experimentos separados. Misturar variáveis dificulta saber qual fator causou a diferença.
</Note>

***

## Exemplo 3: Formulário de Captura de Lead

Testar campos do formulário de signup para reduzir fricção.

```tsx components/SignupForm.tsx theme={null}
'use client';

import { useState } from 'react';
import { useExperiment } from '@testlyjs/react';

export function SignupForm() {
  const { variant, convert } = useExperiment('signup-form-fields');
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');

  // Controle: pede email + nome
  // Variante B: pede só email (menos fricção)
  const isMinimalForm = variant === 'variant-b';

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    convert('form_submitted');

    const payload = isMinimalForm ? { email } : { email, name };

    await fetch('/api/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-sm mx-auto">
      {!isMinimalForm && (
        <input
          type="text"
          placeholder="Seu nome"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      )}
      <input
        type="email"
        placeholder="Seu email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <button
        type="submit"
        className="bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold"
      >
        Criar Conta Grátis
      </button>
    </form>
  );
}
```

<Warning>
  Formulários com menos campos convertem mais, mas podem capturar dados de menor qualidade. Meça a qualidade do lead (ativação, retenção) além da taxa de cadastro.
</Warning>

***

## Exemplo 4: CTA com Urgência

Testar se elementos de urgência aumentam conversões.

```tsx components/UrgencyCTA.tsx theme={null}
'use client';

import { useExperiment } from '@testlyjs/react';

export function UrgencyCTA() {
  const { variant, convert } = useExperiment('cta-urgency');

  const handleClick = () => {
    convert('urgency_cta_clicked');
    window.location.href = '/signup';
  };

  return (
    <div className="text-center">
      <button
        onClick={handleClick}
        className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg"
      >
        Começar Grátis
      </button>

      {/* Texto de suporte — testado na Variante B */}
      {variant === 'variant-b' && (
        <p className="mt-3 text-sm text-gray-500">
          ⚡ Setup em 5 minutos · Sem cartão de crédito · Cancele quando quiser
        </p>
      )}

      {variant === 'variant-c' && (
        <p className="mt-3 text-sm text-orange-600 font-medium">
          🔥 Últimas vagas no plano gratuito — oferta por tempo limitado
        </p>
      )}
    </div>
  );
}
```

<Note>
  Urgência falsa (escassez fabricada) pode aumentar conversão no curto prazo, mas prejudica confiança. Prefira urgência real ou ressaltar benefícios genuínos.
</Note>

***

## Rastreando Múltiplos CTAs

Se a mesma página tem vários CTAs (header, meio, footer), use `conversion_type` para distinguir:

```tsx theme={null}
// Header CTA
const handleHeaderCTA = () => {
  convert('cta_clicked_header');
};

// Footer CTA
const handleFooterCTA = () => {
  convert('cta_clicked_footer');
};
```

Isso permite ver qual posição converte melhor dentro do mesmo experimento.

***

## Próximos Passos

<CardGroup cols={2}>
  <Card title="Hero Section" icon="layout" href="/examples/hero-section">
    Teste títulos e layouts de hero
  </Card>

  <Card title="Pricing Page" icon="dollar-sign" href="/examples/pricing-page">
    Teste estruturas de preço
  </Card>

  <Card title="Onboarding Flow" icon="route" href="/examples/onboarding-flow">
    Melhore a experiência de onboarding
  </Card>

  <Card title="Boas Práticas" icon="star" href="/guides/best-practices">
    Metodologias de experimentação
  </Card>
</CardGroup>