Início / Documentação / Formato dos documentos

Formato dos documentos

O que vem em content quando você lê um documento. As listas desta página são geradas a partir do próprio Cloonyx, então trazem exatamente os tipos que podem aparecer.

Quiz

Um quiz é uma lista de etapas em content.steps. Cada etapa tem um tipo, um título e o caminho para a próxima.

Exemplo mínimo

{
  "name": "Meu quiz",
  "content": {
    "steps": [
      {
        "id": "inicio",
        "type": "cover",
        "title": "Descubra seu perfil",
        "cta": "Começar",
        "next": "pergunta"
      },
      {
        "id": "pergunta",
        "type": "single",
        "title": "O que você quer?",
        "options": [
          {
            "label": "Mais foco",
            "next": "fim"
          },
          {
            "label": "Mais energia",
            "next": "fim"
          }
        ]
      },
      {
        "id": "fim",
        "type": "result",
        "title": "Seu resultado",
        "blocks": [
          {
            "type": "paragraph"
          }
        ]
      }
    ]
  }
}

Campo da etapa	Descrição
`id`	Identificador da etapa, texto livre. Gerado quando falta.
`type`	Tipo da etapa, da lista abaixo.
`title`	Título que o visitante vê.
`body`	Texto de apoio abaixo do título.
`cta`	Texto do botão de avançar.
`options`	Opções de resposta: `label`, `score`, `tags` e `next` para levar a uma etapa específica.
`next`	Etapa seguinte quando nenhuma opção define o caminho.
`blocks`	Blocos de conteúdo dentro da etapa, da lista de blocos de quiz.

Tipos de etapa (21)

type	Nome
`cover`	Capa
`single`	Escolha única
`multiple`	Múltipla escolha
`image`	Escolha com imagem
`scale`	Escala
`yesno`	Sim / Não
`ranking`	Ranking
`input`	Texto livre
`video`	Vídeo + escolhas
`audio`	Áudio
`alert`	Alerta + timer
`testimonial`	Depoimento
`capture`	Captura de lead
`loading`	Calculando resultado
`result`	Diagnóstico
`pitch`	Oferta
`bump`	Order bump
`upsell`	Upsell
`downsell`	Downsell
`thanks`	Obrigado
`embed`	HTML / embed

Blocos de quiz (93)

Formulário

type	Nome	Descrição
`field`	Campo de texto	Campo de texto de uma linha
`email`	Email	Email com validação e correção de domínio
`tel`	Telefone	Telefone com DDI e máscara
`number`	Número	Campo numérico
`textarea`	Texto longo	Área de texto com contador
`date`	Data	Seletor de data
`document`	CPF ou documento	Documento com máscara e validação de CPF
`address`	Endereço ou CEP	CEP com máscara e campos de endereço
`upload`	Upload de arquivo	Envio de arquivo com prévia
`button`	Botão	Botão que avança, vai para uma etapa ou abre um link

Quiz

type	Nome	Descrição
`single`	Escolha única	Uma resposta entre várias opções
`multiple`	Múltipla escolha	Várias respostas entre as opções
`imageOptions`	Opções com imagem	Opções ilustradas em grade
`yesno`	Sim ou não	Dois botões grandes com ramificação direta
`scale`	Escala	Escala numérica em slider ou botões
`nps`	NPS	Escala de 0 a 10 com detrator, neutro e promotor
`ranking`	Ordenação	Itens que o visitante coloca em ordem
`bodyMetrics`	Peso e altura	Peso e altura com unidades e IMC opcional
`videoAnswer`	Vídeo Resposta	Vídeo com opções de resposta embaixo

Mídia

type	Nome	Descrição
`heading`	Título	Título de destaque com nível semântico
`paragraph`	Texto	Texto corrido com negrito, itálico, link e variáveis
`image`	Imagem	Imagem com proporção, ajuste e link
`gallery`	Galeria	Grade de imagens
`audio`	Áudio	Player de áudio tematizado
`embed`	Embed de vídeo	YouTube, Vimeo, VTurb, Panda ou iframe. Não executa no editor
`icon`	Ícone	Um ícone lucide com tamanho
`iconList`	Lista com ícones	Itens com ícone, título e descrição
`map`	Mapa	Mapa do Google a partir de um endereço ou coordenadas
`socialIcons`	Redes sociais	Ícones que levam para os seus perfis

Atenção

type	Nome	Descrição
`alert`	Alerta	Caixa de aviso com variantes
`timer`	Timer	Contagem regressiva real, fixa, com prazo ou por sessão
`loading`	Loading	Mensagens em sequência e avanço automático
`notification`	Notificação	Aviso flutuante com rotação entre mensagens do autor
`countdown`	Contagem regressiva	Dígitos em cartões com rótulos de unidade
`progress`	Barra de progresso	Manual ou automática pela etapa
`animatedText`	Texto animado	Frase fixa com palavras que se alternam no final
`confetti`	Confete	Chuva de confete ao abrir a etapa
`counter`	Contador	Número que sobe até o valor quando aparece na tela

Prova

type	Nome	Descrição
`testimonial`	Depoimento	Depoimentos com avatar, nome e nota
`faq`	FAQ	Perguntas e respostas em acordeão funcional
`price`	Preço	Caixa de preço com desconto, parcelas e botão
`checklist`	Checklist	Itens marcados como positivos ou negativos
`beforeAfter`	Antes e depois	Comparador com divisor arrastável
`carousel`	Carrossel	Slides com imagem, título e texto
`guaranteeBadge`	Selo de garantia	Ícone, título, prazo e texto
`comparisonTable`	Tabela comparativa	Colunas com presente ou ausente por linha
`stars`	Avaliação por estrelas	Nota em estrelas com texto
`argumentos`	Argumentos	Duas colunas com pontos a favor e contra
`certificationSeal`	Selo de certificação	Certificações e registros com quem emitiu e número
`logoStrip`	Faixa de logos	Linha de logos com altura e opacidade iguais
`proofShot`	Prova em imagem	Print de tela com moldura, legenda e origem
`pullQuote`	Citação destacada	Uma frase em destaque, com autoria opcional
`testimonialVideo`	Depoimento em vídeo	Vídeos curtos de quem já usou, com legenda e origem
`testimonialWall`	Mural de depoimentos	Vários depoimentos escritos em colunas, estilo mural

Comercial

type	Nome	Descrição
`checkout`	Checkout	Botão que leva ao checkout, com preço opcional
`whatsapp`	WhatsApp	Botão para conversa no WhatsApp com mensagem pronta
`bump`	Order bump	Caixa com checkbox para adicionar um extra à compra
`upsell`	Upsell	Oferta seguinte com aceitar e recusar
`coupon`	Cupom de desconto	Campo que registra o cupom digitado e leva junto para o checkout
`discountWheel`	Roleta	Roleta que para sempre no prêmio que você escolheu e mostra o cupom
`orderSummary`	Resumo do pedido	Lista os itens do pedido com um total no fim
`paymentMethods`	Formas de pagamento	Lista as formas de pagamento aceitas, com ícone opcional
`planPicker`	Seletor de plano	Cartões de plano que o visitante escolhe antes de seguir
`secureBadge`	Selo de compra segura	Bloco de segurança com ícone, título e linhas de reforço
`stickyCheckout`	Checkout fixo	Barra de compra que fica fixa na página publicada

Avançado

type	Nome	Descrição
`space`	Espaço	Espaço vertical em pixels, por dispositivo
`divider`	Divisor	Linha com estilo, espessura e texto central
`html`	HTML	Código bruto isolado. Bloqueado no editor, não responsivo por si
`container`	Container	Agrupa blocos com direção, fundo, borda e padding
`columns`	Colunas	Duas a quatro colunas que empilham no mobile
`cards`	Cards interativos	Escolher N cartas que viram e revelam um resultado
`redirect`	Redirecionamento	Redireciona depois de um atraso, preservando parâmetros
`conditional`	Bloco condicional	Só mostra os filhos quando as condições valem
`navMenu`	Menu	Barra com logo e links, que vira botão no celular
`scrollTop`	Voltar ao topo	Botão flutuante que aparece depois de rolar a página
`tabs`	Abas	Conteúdo dividido em abas que a pessoa troca com um toque

Overlays

type	Nome	Descrição
`bottomBar`	Barra fixa no rodapé	Faixa presa ao rodapé da página publicada
`cookieNotice`	Aviso de cookies	Faixa de consentimento que some depois do aceite
`exitPopup`	Popup de saída	Aparece quando o ponteiro sai pelo topo da janela
`modal`	Modal	Janela sobre a página, com abertura imediata ou por atraso
`sidePanel`	Painel lateral	Painel que entra pela lateral da página publicada
`tooltip`	Dica em balão	Texto curto que aparece em um balão ao lado da âncora
`topBar`	Barra fixa no topo	Faixa presa ao topo da página publicada

Resultado

type	Nome	Descrição
`answersRecap`	Resumo das respostas	Lista o que a pessoa respondeu antes de seguir
`axisChart`	Gráfico por eixo	Pontuação de cada eixo do quiz em barras
`barChart`	Gráfico de barras	Barras com valores calculados a partir das respostas
`dynamicText`	Texto personalizado	Texto que troca as variáveis do quiz pelo valor real
`level`	Nível	Barra com porcentagem calculada por variável ou fórmula
`nameGreeting`	Saudação com nome	Cumprimenta usando o nome que a pessoa digitou
`pieChart`	Gráfico de pizza	Proporções em pizza ou rosca, com legenda
`profileMeter`	Barra de progresso do perfil	Medidor com faixas nomeadas e marcador na posição atual
`resultCard`	Cartão de resultado	Mostra o resultado calculado do quiz em destaque
`scoreRecommendation`	Recomendação por faixa	Mostra um bloco de texto diferente conforme a pontuação

Oferta e página

Ofertas e páginas usam uma lista de camadas em content.layers, de cima para baixo. Cada camada tem um tipo e os campos daquele tipo, como text, href, src e alt. Também é possível mandar content.sections, uma lista de seções com blocks dentro.

Exemplo mínimo

{
  "name": "Minha página",
  "content": {
    "layers": [
      {
        "type": "heading",
        "text": "Título"
      },
      {
        "type": "text",
        "text": "Parágrafo"
      },
      {
        "type": "button",
        "text": "Quero",
        "href": "https://exemplo.com"
      }
    ]
  }
}

O link do botão de compra fica em href da camada ou em checkoutUrl do documento, sempre com https.

Tipos de camada (68)

Texto

type	Nome
`heading`	Título
`text`	Texto
`list`	Lista

Mídia

type	Nome
`image`	Imagem
`embed`	Vídeo (embed)
`audio`	Áudio
`paragraph`	Texto
`gallery`	Galeria
`icon`	Ícone
`iconList`	Lista com ícones
`map`	Mapa
`socialIcons`	Redes sociais

Ação

type	Nome
`button`	Botão
`checkout`	Checkout
`whatsapp`	WhatsApp
`field`	Campo

Avançado

type	Nome
`html`	HTML
`pixel`	Pixel
`container`	Container
`columns`	Colunas
`cards`	Cards interativos
`conditional`	Bloco condicional
`navMenu`	Menu
`scrollTop`	Voltar ao topo
`tabs`	Abas

Estrutura

type	Nome
`space`	Espaço
`divider`	Divisor
`section`	Seção

Atenção

type	Nome
`alert`	Alerta
`timer`	Timer
`notification`	Notificação
`countdown`	Contagem regressiva
`progress`	Barra de progresso
`animatedText`	Texto animado
`counter`	Contador

Prova

type	Nome
`testimonial`	Depoimento
`faq`	FAQ
`price`	Preço
`checklist`	Checklist
`beforeAfter`	Antes e depois
`carousel`	Carrossel
`guaranteeBadge`	Selo de garantia
`comparisonTable`	Tabela comparativa
`stars`	Avaliação por estrelas
`argumentos`	Argumentos
`certificationSeal`	Selo de certificação
`logoStrip`	Faixa de logos
`proofShot`	Prova em imagem
`pullQuote`	Citação destacada
`testimonialVideo`	Depoimento em vídeo
`testimonialWall`	Mural de depoimentos

Comercial

type	Nome
`bump`	Order bump
`upsell`	Upsell
`coupon`	Cupom de desconto
`discountWheel`	Roleta
`orderSummary`	Resumo do pedido
`paymentMethods`	Formas de pagamento
`planPicker`	Seletor de plano
`secureBadge`	Selo de compra segura
`stickyCheckout`	Checkout fixo

Overlays

type	Nome
`bottomBar`	Barra fixa no rodapé
`cookieNotice`	Aviso de cookies
`exitPopup`	Popup de saída
`modal`	Modal
`sidePanel`	Painel lateral
`tooltip`	Dica em balão
`topBar`	Barra fixa no topo

Resultado

type	Nome
`pieChart`	Gráfico de pizza

Funil

Um funil liga documentos que já existem. content.nodes são as etapas e content.edges são as ligações entre elas.

Exemplo mínimo

{
  "name": "Meu funil",
  "content": {
    "nodes": [
      {
        "id": "n1",
        "kind": "quiz",
        "assetId": "<id do quiz>"
      },
      {
        "id": "n2",
        "kind": "checkout",
        "url": "https://pagamento.exemplo.com/produto"
      }
    ],
    "edges": [
      {
        "id": "e1",
        "from": "n1",
        "to": "n2"
      }
    ]
  }
}

kind	Aponta para
`quiz`	Um quiz, pelo `assetId`.
`page`	Uma página.
`offer`	Uma oferta.
`upsell`	Uma oferta usada como upsell.
`downsell`	Uma oferta usada como downsell.
`thanks`	Uma página de obrigado.
`checkout`	Um checkout externo, pela `url` com https.
`external`	Qualquer outro endereço, pela `url` com https.

x e y em cada nó são opcionais e definem a posição no mapa do funil no app.

Regras

Os ids das etapas são texto livre. next, declineNext, o next de cada opção e o next de cada regra apontam para outra etapa do mesmo quiz, ou ficam vazios.
content é o rascunho atual. A versão no ar pode estar diferente até a próxima publicação no app.
Use GET /api/v1/blocks?type= para ver os campos e os valores padrão de cada tipo.

AnteriorAPI REST