Documentação

Como criar templates
para o Webbo Pages

Templates Webbo são arquivos HTML normais com atributos especiais data-webbo-* que tornam o conteúdo editável pelo cliente no painel admin.

Começar

Estrutura Básica

Um template Webbo é um HTML comum. Você faz upload como .zip contendo o index.html e quaisquer assets (CSS, JS, imagens). O Webbo escaneia os atributos data-webbo-* e gera os campos editáveis automaticamente.

<!-- Estrutura mínima de um template Webbo -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO editável -->
  <title data-webbo-seo="title">Meu Site</title>
  <meta name="description" data-webbo-seo="description"
        content="Descrição do site">

  <!-- Seus estilos -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Conteúdo editável aqui -->
  <h1 data-webbo-key="hero-title">Bem-vindo</h1>
  <p data-webbo-key="hero-desc">Texto de apresentação</p>

</body>
</html>

Dica: O conteúdo entre as tags (ex: "Bem-vindo") serve como valor padrão. O cliente pode alterar pelo painel admin.

Estrutura do ZIP

O Webbo identifica páginas pelos arquivos .html na raiz do ZIP. Cada arquivo vira uma página com slug baseado no nome. Não use subpastas para páginas — pastas são usadas apenas para assets (CSS, JS, imagens).

Correto

meu-template.zip
├── index.html      → página inicial
├── sobre.html      → slug: "sobre"
├── servicos.html   → slug: "servicos"
├── contato.html    → slug: "contato"
├── _produto.html   → detalhe coleção
├── css/
│   └── style.css
├── js/
│   └── app.js
└── images/
    └── logo.png

Errado

meu-template.zip
├── index.html
├── pages/
│   ├── sobre/
│   │   └── index.html  → ignorado!
│   └── servicos/
│       └── index.html  → ignorado!
└── css/
    └── style.css

Regras de nomes:

index.html → página inicial do site
nome.html → página com slug "nome", acessível em /nome/
_nome.html → página de detalhe de coleção (prefixo _)
Links entre páginas: use href="sobre.html" ou href="/sobre/"

Slots Editáveis

O atributo data-webbo-key marca um elemento como editável. A key deve ser única na página.

<!-- Texto simples -->
<h1 data-webbo-key="hero-title">Título Principal</h1>

<!-- Imagem editável -->
<img data-webbo-key="hero-img"
     src="placeholder.jpg"
     alt="Hero">

<!-- Link editável -->
<a data-webbo-key="cta-link"
   href="#">Saiba Mais</a>

<!-- Texto longo (textarea) -->
<p data-webbo-key="about-description">
  Texto longo sobre a empresa que o cliente pode editar...
</p>

T

Texto

Detectado automaticamente em <h1>-<h6>, <span>, <p> curto

Imagem

Detectado em <img>, <picture>, <source>

Link

Detectado em <a> — edita o href

Tipos de Conteúdo

Use data-webbo-type para forçar um tipo. Se omitido, o tipo é auto-detectado.

Tipo	Descrição	Auto-detectado?
`text`	Texto simples (uma linha)	SIM padrão
`textarea`	Texto longo (multilinhas)	SIM se >80 chars ou key com "description", "bio", "quote"
`image`	URL de imagem (edita src)	SIM em <img>, <picture>, <source>
`link`	URL de link (edita href)	SIM em <a>
`richtext`	HTML editável (innerHTML)	NÃO precisa declarar
`styled-text`	Texto com destaque (span colorido)	NÃO precisa declarar

<!-- Forçando tipo richtext -->
<div data-webbo-key="about-content"
     data-webbo-type="richtext">
  <p>Conteúdo com <strong>negrito</strong> e <em>itálico</em>.</p>
</div>

<!-- Forçando tipo textarea em elemento curto -->
<p data-webbo-key="note"
   data-webbo-type="textarea">Nota curta</p>

Styled Text (Texto com Destaque)

Para títulos com parte destacada (outra cor, negrito etc.), use styled-text + data-webbo-highlight-class.

<!-- Título: "Resultados que" (normal) + "impressionam" (destaque) -->
<h2 data-webbo-key="hero-title"
    data-webbo-type="styled-text"
    data-webbo-highlight-class="text-blue-500 font-bold">
  Resultados que <span class="text-blue-500 font-bold">impressionam</span>
</h2>

Como funciona: O editor salva como JSON {"main": "Resultados que", "highlight": "impressionam"}. O data-webbo-highlight-class define a classe CSS do <span> de destaque.

Blocos de Repetição

Para listas dinâmicas (serviços, depoimentos, equipe etc.), use data-webbo-item nos containers e keys com padrão prefixo-índice-campo.

<!-- Seção de serviços com 3 itens -->
<section>
  <h2 data-webbo-key="services-title">Nossos Serviços</h2>

  <div class="grid grid-cols-3 gap-6">

    <!-- Item 0 -->
    <div data-webbo-item="services-0">
      <img data-webbo-key="services-0-icon" src="icon1.svg">
      <h3 data-webbo-key="services-0-title">Consultoria</h3>
      <p data-webbo-key="services-0-desc">Descrição do serviço</p>
    </div>

    <!-- Item 1 -->
    <div data-webbo-item="services-1">
      <img data-webbo-key="services-1-icon" src="icon2.svg">
      <h3 data-webbo-key="services-1-title">Design</h3>
      <p data-webbo-key="services-1-desc">Descrição do serviço</p>
    </div>

    <!-- Item 2 -->
    <div data-webbo-item="services-2">
      <img data-webbo-key="services-2-icon" src="icon3.svg">
      <h3 data-webbo-key="services-2-title">Marketing</h3>
      <p data-webbo-key="services-2-desc">Descrição do serviço</p>
    </div>

  </div>
</section>

Padrão de keys: {grupo}-{índice}-{campo}
O cliente pode adicionar/remover itens pelo editor. O primeiro item serve como modelo para novos itens clonados.

Coleções (CMS Dinâmico)

Coleções são listas CMS gerenciadas no painel (produtos, imóveis, posts etc.). Diferente dos blocos de repetição, os dados vêm do banco.

Página de Listagem

<!-- Container da coleção -->
<div data-webbo-collection="products">

  <!-- Template de cada item (será clonado para cada registro) -->
  <div data-webbo-collection-item>
    <a href="product-detail.html?slug={slug}">
      <img data-webbo-field="image"
           data-webbo-type="image"
           src="placeholder.jpg">
      <h3 data-webbo-field="name">Nome do Produto</h3>
      <p data-webbo-field="price">R$ 99</p>
    </a>
  </div>

</div>

Página de Detalhe

<!-- product-detail.html -->
<article>
  <img data-webbo-field="image" data-webbo-type="image" src="placeholder.jpg">
  <h1 data-webbo-field="name">Nome do Produto</h1>
  <p data-webbo-field="price">R$ 99</p>
  <div data-webbo-field="description"
       data-webbo-type="richtext">
    Descrição completa do produto...
  </div>
</article>

Formulários

Adicione data-webbo-form ao <form> para enviar leads direto ao Inbox do Webbo. O Webbo injeta automaticamente o script de submissão.

<form data-webbo-form>

  <input type="text"
         name="name"
         placeholder="Seu nome"
         required>

  <input type="email"
         name="email"
         placeholder="[email protected]"
         required>

  <input type="tel"
         name="phone"
         placeholder="(00) 00000-0000">

  <textarea name="message"
            placeholder="Sua mensagem"></textarea>

  <button type="submit">Enviar</button>

  <!-- Mensagem de sucesso (opcional, oculta por padrão) -->
  <div data-webbo-form-success
       style="display:none;">
    Obrigado! Entraremos em contato em breve.
  </div>

</form>

O que acontece: Os dados do formulário são enviados automaticamente para /api/ingest/forms/{slug} e aparecem como lead no Webbo Inbox.

Importante: Use o atributo name nos inputs. Campos com name="email" e name="name" são mapeados automaticamente como dados do lead.

SEO

Use data-webbo-seo para tornar título e descrição editáveis pelo cliente.

<head>
  <!-- Título da página (aparece na aba do navegador e no Google) -->
  <title data-webbo-seo="title">Minha Empresa - Soluções Digitais</title>

  <!-- Meta descrição (aparece no Google) -->
  <meta name="description"
        data-webbo-seo="description"
        content="Descrição que aparece nos resultados de busca">
</head>

Open Graph: O Webbo gera automaticamente as tags og:title, og:description e og:image com base no conteúdo SEO editado.

Exemplo: Página de Blog

Um blog é o caso de uso perfeito para coleções. Você cria a listagem + a página de detalhe usando data-webbo-collection e data-webbo-field.

Estrutura dos arquivos no ZIP

meu-template.zip
├── index.html        → página inicial do site
├── blog.html         → listagem de posts (usa data-webbo-collection="blog")
├── _blog.html        → detalhe do post (prefixo _ = página de detalhe)
├── css/
│   └── style.css
└── images/
    └── placeholder.jpg

Convenção de nomes: O arquivo de listagem é blog.html e o detalhe é _blog.html (mesmo nome com prefixo _). O Webbo detecta automaticamente que _blog.html é o template de detalhe da coleção "blog". A URL do post fica: /blog/meu-post-slug/

GIF: Demonstração da listagem de posts no admin

Listagem de posts (blog.html)

<!-- Cabeçalho editável do blog -->
<section>
  <h1 data-webbo-key="blog-title">Nosso Blog</h1>
  <p data-webbo-key="blog-subtitle">Novidades e dicas para seu negócio</p>
</section>

<!-- Lista de posts via coleção -->
<div data-webbo-collection="posts">
  <article data-webbo-collection-item>
    <a href="/blog/{slug}/">
      <img data-webbo-field="cover"
           data-webbo-type="image"
           src="placeholder.jpg">
      <span data-webbo-field="category">Categoria</span>
      <h2 data-webbo-field="title">Título do Post</h2>
      <p data-webbo-field="excerpt">Resumo do post...</p>
      <time data-webbo-field="date">01/01/2025</time>
    </a>
  </article>
</div>

Página de detalhe (_blog.html)

<article>
  <img data-webbo-field="cover"
       data-webbo-type="image"
       src="placeholder.jpg">

  <span data-webbo-field="category">Categoria</span>
  <h1 data-webbo-field="title">Título do Post</h1>
  <time data-webbo-field="date">01/01/2025</time>

  <!-- Corpo do post em richtext -->
  <div data-webbo-field="content"
       data-webbo-type="richtext">
    <p>Conteúdo completo do post com formatação rica...</p>
  </div>

  <!-- Autor (slot estático da página, não do CMS) -->
  <div>
    <img data-webbo-field="author-avatar"
         data-webbo-type="image"
         src="avatar.jpg">
    <span data-webbo-field="author-name">Nome do Autor</span>
  </div>
</article>

GIF: Edição inline de um post no editor visual

Dica: O ZIP deve conter blog.html (listagem) e _blog.html (detalhe). O Webbo detecta o prefixo _ e associa automaticamente. Cada post fica acessível em /blog/{slug-do-post}/.

Do's & Don'ts

Boas práticas e erros comuns ao criar templates para o Webbo Pages.

Faça

Use keys descritivas: hero-title, about-description
Coloque conteúdo padrão realista dentro das tags editáveis
Use data-webbo-type quando o tipo não é óbvio (ex: richtext)
Comece blocos de repetição do índice 0: svc-0, svc-1, svc-2
Inclua data-webbo-seo no <title> e <meta description>
Use name="email" e name="name" nos formulários
Teste o template em desktop e mobile antes do upload
Mantenha assets (CSS/JS/imagens) relativos e dentro do ZIP

Não faça

Não repita keys — cada data-webbo-key deve ser único na página
Não adicione JS de submit nos formulários — o Webbo injeta automaticamente
Não pule índices na repetição — use 0, 1, 2 (não 1, 3, 5)
Não use URLs absolutas para assets internos — use caminhos relativos
Não deixe tags editáveis vazias — sempre coloque conteúdo padrão
Não misture data-webbo-key com data-webbo-field — key é para slots estáticos, field para coleções CMS
Não aninhe elementos com data-webbo-key dentro de outros elementos com data-webbo-key
Não use keys genéricas como "text1", "img2" — use nomes semânticos

GIF: Comparação visual — template correto vs erros comuns

Exemplos lado a lado

Correto

<!-- Keys descritivas e únicas -->
<h1 data-webbo-key="hero-title">
  Título aqui
</h1>
<p data-webbo-key="hero-subtitle">
  Subtítulo aqui
</p>

Errado

<!-- Keys duplicadas! -->
<h1 data-webbo-key="title">
  Título aqui
</h1>
<p data-webbo-key="title">
  Subtítulo aqui
</p>

Correto

<!-- Repetição sequencial -->
<div data-webbo-item="team-0">...</div>
<div data-webbo-item="team-1">...</div>
<div data-webbo-item="team-2">...</div>

Errado

<!-- Índices pulados! -->
<div data-webbo-item="team-1">...</div>
<div data-webbo-item="team-3">...</div>
<div data-webbo-item="team-5">...</div>

Resultado Final

GIF: Fluxo completo — upload do ZIP, editor visual, publicação e site no ar

Referência Rápida

Atributo	Onde usar	Valor
`data-webbo-key`	Qualquer elemento editável	String única na página (ex: `"hero-title"`)
`data-webbo-type`	Junto com `data-webbo-key`	`text` \| `textarea` \| `image` \| `link` \| `richtext` \| `styled-text`
`data-webbo-seo`	`<title>`, `<meta>`	`"title"` \| `"description"`
`data-webbo-item`	Container de item repetido	`"prefixo-índice"` (ex: `"team-0"`)
`data-webbo-highlight-class`	Junto com `styled-text`	Classes CSS do span de destaque
`data-webbo-collection`	Container de listagem CMS	Nome da coleção (ex: `"products"`)
`data-webbo-collection-item`	Template de item dentro da coleção	(sem valor)
`data-webbo-field`	Campo dentro de coleção	Nome do campo CMS (ex: `"name"`, `"image"`)
`data-webbo-form`	`<form>`	(sem valor) — envia leads ao Inbox
`data-webbo-form-success`	Elemento dentro do form	(sem valor) — exibido após envio

Exemplo: Template Completo

Uma landing page completa usando todos os recursos do Webbo Pages:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-webbo-seo="title">Minha Empresa</title>
  <meta name="description" data-webbo-seo="description"
        content="Soluções digitais para seu negócio">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ===== HERO ===== -->
  <header>
    <img data-webbo-key="logo" src="logo.svg" alt="Logo">
    <h1 data-webbo-key="hero-title"
        data-webbo-type="styled-text"
        data-webbo-highlight-class="text-blue-500">
      Soluções que <span class="text-blue-500">transformam</span>
    </h1>
    <p data-webbo-key="hero-subtitle">Descubra como podemos ajudar</p>
    <a data-webbo-key="hero-cta" href="#contato">Fale Conosco</a>
    <img data-webbo-key="hero-img" src="hero.jpg" alt="Hero">
  </header>

  <!-- ===== SERVIÇOS (repetição) ===== -->
  <section>
    <h2 data-webbo-key="services-heading">Nossos Serviços</h2>
    <div data-webbo-item="svc-0">
      <img data-webbo-key="svc-0-img" src="s1.svg">
      <h3 data-webbo-key="svc-0-title">Serviço 1</h3>
      <p data-webbo-key="svc-0-desc">Descrição</p>
    </div>
    <div data-webbo-item="svc-1">
      <img data-webbo-key="svc-1-img" src="s2.svg">
      <h3 data-webbo-key="svc-1-title">Serviço 2</h3>
      <p data-webbo-key="svc-1-desc">Descrição</p>
    </div>
    <div data-webbo-item="svc-2">
      <img data-webbo-key="svc-2-img" src="s3.svg">
      <h3 data-webbo-key="svc-2-title">Serviço 3</h3>
      <p data-webbo-key="svc-2-desc">Descrição</p>
    </div>
  </section>

  <!-- ===== SOBRE ===== -->
  <section>
    <h2 data-webbo-key="about-title">Sobre Nós</h2>
    <div data-webbo-key="about-text"
         data-webbo-type="richtext">
      <p>Somos uma empresa focada em...</p>
    </div>
    <img data-webbo-key="about-img" src="team.jpg">
  </section>

  <!-- ===== FORMULÁRIO ===== -->
  <section id="contato">
    <h2 data-webbo-key="form-title">Fale Conosco</h2>
    <form data-webbo-form>
      <input name="name" placeholder="Nome" required>
      <input name="email" type="email" placeholder="Email" required>
      <input name="phone" type="tel" placeholder="Telefone">
      <textarea name="message" placeholder="Mensagem"></textarea>
      <button type="submit">Enviar</button>
      <div data-webbo-form-success style="display:none">
        Mensagem enviada com sucesso!
      </div>
    </form>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer>
    <p data-webbo-key="footer-text">&copy; 2025 Minha Empresa</p>
  </footer>

</body>
</html>

Pronto para criar seu template?

Baixe o guia completo em Markdown e envie para sua IA favorita para te ajudar a criar o template perfeito.

Como criar templatespara o Webbo Pages

Estrutura Básica

Estrutura do ZIP

Slots Editáveis

Texto

Imagem

Link

Tipos de Conteúdo

Styled Text (Texto com Destaque)

Blocos de Repetição

Coleções (CMS Dinâmico)

Página de Listagem

Página de Detalhe

Formulários

SEO

Exemplo: Página de Blog

Estrutura dos arquivos no ZIP

Listagem de posts (blog.html)

Página de detalhe (_blog.html)

Do's & Don'ts

Faça

Não faça

Exemplos lado a lado

Resultado Final

Referência Rápida

Exemplo: Template Completo

Pronto para criar seu template?

Como criar templates
para o Webbo Pages