Incorporando um criador de sites no seu produto: como as peças se encaixam

White label / Criador incorporado

Se você tem um produto SaaS para salões, academias, prestadores de serviço ou restaurantes, os seus clientes pedem um site e você prefere que eles não saiam para conseguir um. Se é melhor incorporar ou redirecionar está explicado na nossa página de plataformas SaaS e na comparação white label vs API. Esta página é para a equipe que já decidiu incorporar: como funciona o handshake de sessão, o que restringir, quais recursos expor, o que quebra dentro de um iframe e como receber eventos.

Agendar uma demonstração · O preço é sob medida para o seu volume e a sua configuração, e você recebe seu preço exato na chamada. 0% de taxa por transação.

Atualizado: 25 de outubro de 2026

Resumo

O seu servidor pede um token de sessão de curta duração com um client ID e um secret; o seu front-end passa só esse token para o script de incorporação. O secret nunca chega ao navegador.
Cada configuração de incorporação lista as origens HTTPS que podem usá-la, quais painéis do criador ficam visíveis, tema, logo e limites por usuário.
Espere problemas específicos de iframe: bloqueio de cookies de terceiros no Safari e no Firefox, a sua própria política frame-ancestors e verificações de origem do postMessage.
Os webhooks da marca são assinados com HMAC-SHA256 incluindo um timestamp, reenviados em caso de falha e desligados após falhas repetidas. Agende uma demonstração para ver o console de incorporação.

Comece pela decisão que você já tomou

Existem três formas de dar um site aos seus usuários: mandá-los para um criador com a sua marca num endereço próprio, chamar uma API e construir a sua própria interface, ou incorporar um criador pronto dentro do seu produto. Os prós e contras estão na nossa página de plataformas SaaS e em white label vs API, e a referência dos endpoints fica na página da API. Aqui partimos do princípio de que você quer o criador dentro do seu próprio app, sob a sua própria navegação, com o login do seu usuário.

Tela do Embedded SDK no console da marca, com um botão Nova configuração de incorporação e um estado vazio explicando que cada configuração tem as próprias credenciais de cliente e opções de personalização

*A seção Embedded SDK do console da marca. Cada configuração de incorporação recebe as próprias credenciais de cliente.*

O handshake de sessão

Incorporações dão errado com mais frequência no login. O padrão que a We.Inc usa mantém os seus usuários logados só no seu produto, sem uma segunda conta para gerenciar:

O seu back-end chama o endpoint de sessão de incorporação com o client ID da configuração, o client secret dela e o ID do seu próprio usuário (e-mail e nome são opcionais).
A resposta traz um token de sessão, o endereço do criador, o ID do projeto desse usuário e um horário de expiração.
O seu back-end devolve só o token de sessão para o seu front-end.
O seu front-end carrega o script de incorporação, aponta-o para um elemento contêiner e o inicializa com o token. Callbacks opcionais disparam quando o criador fica pronto, quando um projeto é salvo, em erros e quando a sessão expira.
Na expiração, o seu front-end pede ao seu back-end um token novo, exatamente como no passo 1.

Regras que decorrem disso:

O client secret é um segredo de servidor. Guarde-o no seu cofre de segredos, nunca em código de front-end, apps móveis ou num repositório público. Ele é mostrado uma única vez quando a configuração é criada.
O ID do seu usuário é a chave. O mesmo ID devolve o projeto do mesmo usuário, então use um ID interno estável, não um endereço de e-mail que pode mudar.
Não reaproveite tokens entre usuários. Peça um por sessão de usuário.

Origens permitidas

Toda configuração de incorporação tem uma lista de origens permitidas: os endereços HTTPS exatos (ou padrões de subdomínio com curinga) das páginas do produto que vão hospedar o criador. Se um pedido de sessão chegar com um cabeçalho de origem que não está na lista, ele é recusado.

Planeje a lista por ambiente. Um erro comum é uma única configuração usada por produção, homologação e desenvolvimento local, o que obriga a configuração de produção a permitir endereços de teste. Em vez disso, crie uma configuração por ambiente, cada uma com as próprias credenciais, para que revogar a de homologação nunca afete a produção.

O que expor

Cada configuração escolhe quais painéis do criador os seus usuários recebem. As opções no console são:

Painel	O que faz	Escolha típica para um SaaS vertical
Chat com IA	Os usuários descrevem mudanças em linguagem simples e a IA as faz	Ligado: é o principal jeito de editar para usuários não técnicos
Prévia	Prévia ao vivo do site	Ligado
Árvore de arquivos	Navegar pelos arquivos do projeto	Desligado para a maioria dos públicos
Terminal	Acesso a terminal no criador	Desligado, a menos que os seus usuários sejam desenvolvedores
Publicar	Publicar o site	Ligado, ou desligado se você publica pela sua própria interface
Exportar	Baixar o código-fonte	Decisão sua: ligado dá aos usuários uma saída, desligado os mantém no seu produto

As configurações também têm um tema (cor principal, fonte, raio dos cantos, modo escuro), um logo personalizado opcional, uma chave para a marca "powered by", um número máximo de projetos por usuário e um número máximo de mensagens de IA por sessão. Defina o limite de mensagens de IA com cuidado; é a principal alavanca do custo de uso num plano que inclui sites.

Tela de API e Webhooks com seções para chaves de API e endpoints de webhook, ambas vazias

*Chaves de API e endpoints de webhook ficam ao lado das configurações de incorporação no console da marca.*

O que quebra dentro de um iframe

Criadores incorporados rodam num frame dentro da sua página. Planeje estes pontos antes do lançamento, não depois do primeiro chamado de suporte.

Cookies de terceiros. A Total Cookie Protection do Firefox e a prevenção de rastreamento do Safari isolam ou bloqueiam cookies definidos por um site em frame de outro domínio. Um handshake com token de sessão evita depender dos cookies do usuário no domínio do criador, mas teste o fluxo completo nas versões atuais do Safari e do Firefox, inclusive em janelas privadas, durante o piloto.
A sua própria política de frames. Se o seu app define uma Content Security Policy, o frame-src (ou child-src) dela precisa permitir o endereço do criador. Se o criador algum dia for servido no seu domínio, confira frame-ancestors e X-Frame-Options para não bloquear a si mesmo.
Mensagens entre frames. O script de incorporação e o criador se comunicam com postMessage. Se você adicionar seus próprios listeners, siga as regras padrão: verifique a origem do evento em relação ao endereço do criador, valide o formato da mensagem e nunca envie dados sensíveis com um destino curinga.
Altura e rolagem. Dê ao contêiner uma altura explícita. Um criador numa caixa de 400 pixels dentro de uma página com rolagem é um sofrimento num notebook; a maioria dos produtos dá a ele toda a área de conteúdo.
Celular. Editar um site no celular dentro de outro app é difícil para todo mundo. Muitos produtos mostram a prévia e o chat com IA no celular e deixam a edição detalhada para o desktop.

Recebendo eventos

Dois tipos de evento importam para um produto que incorpora o criador.

Na página: os callbacks do script de incorporação (pronto, salvo, erro, sessão expirada) permitem que a sua interface reaja na hora, por exemplo mostrando "Salvo" no seu próprio cabeçalho.

No seu servidor: os webhooks da marca informam eventos de clientes: cliente se cadastrou, primeiro site criado, site publicado, sem publicar sete dias depois de entrar, cliente indicou alguém, pagamento recebido e cliente pausado. Cada entrega é um corpo JSON com um ID de entrega (estável entre reenvios), o nome do evento, um timestamp e os dados.

Configurações de webhooks com um campo de endpoint, caixas de eventos e uma nota de que entregas com falha são reenviadas

*Escolhendo eventos de webhook. A nota à direita informa a regra de reenvio e de desativação automática.*

Como recebê-los com segurança:

Verifique a assinatura. Cada requisição traz uma assinatura HMAC-SHA256 do corpo (o cabeçalho original) e uma segunda assinatura sobre o timestamp e o corpo, além do próprio timestamp. Verifique a que tem timestamp e rejeite requisições com mais de alguns minutos, o que bloqueia replays.
Seja idempotente. Os reenvios reutilizam o ID de entrega; guarde os IDs processados e ignore repetições.
Responda rápido. Confirme o recebimento rapidamente e faça o trabalho lento num job em segundo plano. Entregas com falha são reenviadas até seis vezes ao longo de cerca de quinze horas, e um endpoint que falha quinze vezes seguidas é desligado, com um e-mail para o dono da marca.

Usos típicos: marcar a conta como "site no ar" no seu produto quando chegar site publicado; iniciar um lembrete de onboarding em sem publicar após sete dias; sincronizar clientes pausados com o estado da sua própria assinatura.

Permissões e o restante da plataforma

A incorporação é uma porta de entrada. A mesma conta de marca também tem contas de clientes com chaves por cliente (publicar, domínio próprio, ver o código, blog, loja, formulários, SEO e aprovação antes de publicar), um log de auditoria das ações da organização e um portal com a sua marca que você pode usar junto com a incorporação para usuários que preferem uma aba separada.

Configurações de um cliente com chaves para publicação, domínio personalizado, acesso ao código, blog, loja, formulários, SEO e aprovação antes de publicar

*Chaves por cliente no console da marca, independentes da configuração de incorporação.*

O criador sob a marca, com um site de template carregado na prévia

*O próprio criador, aqui no endereço da marca. Incorporado, o mesmo criador fica dentro do seu produto.*

Os sites são código de verdade (React, Vite, TypeScript, Tailwind), e o código de cada site pode ser baixado ou sincronizado com o GitHub, o que importa se você um dia trocar de plataforma ou se um cliente pedir os arquivos dele.

Painel de código com uma árvore de arquivos e o código-fonte de um componente aberto

*O painel de código: o site é código-fonte, não um formato fechado.*

Checklist antes do lançamento

Copie isto para o seu ticket de lançamento.

[ ] Uma configuração de incorporação por ambiente, cada uma com as próprias credenciais e origens.
[ ] Client secret guardado só no servidor; procedimento de rotação documentado.
[ ] IDs internos estáveis de usuário enviados na chamada de sessão.
[ ] O callback de sessão expirada busca um token novo sem recarregar a página.
[ ] Painéis escolhidos por plano; terminal e árvore de arquivos desligados, a menos que sejam necessários.
[ ] Limite de mensagens de IA e de projetos por usuário definidos para cada plano.
[ ] A sua CSP permite o criador no frame-src; testado no Chrome, no Safari e no Firefox, inclusive numa janela privada.
[ ] O endpoint de webhook verifica a assinatura com timestamp e guarda os IDs de entrega.
[ ] "Site publicado" e "sem publicar após 7 dias" conectados ao seu produto ou CRM.
[ ] Roteiro de suporte para "meu site não carrega" que verifica primeiro a origem, a expiração do token e as configurações de privacidade do navegador.
[ ] Decisão registrada sobre se os usuários podem exportar o código e o que acontece com os sites quando um cliente cancela.

Próximos passos

Se você ainda está escolhendo entre incorporar e um portal com a sua marca, comece pela página de plataformas SaaS. Se precisa dos detalhes dos endpoints para provisionar clientes, veja a página da API. Se está pronto para testar a incorporação com o seu próprio produto num ambiente de teste, agende uma demonstração e configuramos uma configuração de incorporação com você.

Fontes

Última verificação em 2026-10-25.

MDN Web Docs, Content-Security-Policy: frame-ancestors directive.
MDN Web Docs, Window: postMessage() method, questões de segurança.
MDN Web Docs, Third-party cookies.

Monte uma configuração de incorporação para o seu produto

Agende uma demonstração de 30 minutos. Mostramos o criador com a sua marca, vemos quantos sites de clientes você pretende operar e passamos seu preço exato.

Agendar uma demonstração

Quer ver o tour completo antes? Conheça o criador de sites white label

Perguntas que os compradores fazem

Os meus usuários precisam de um login separado para o criador incorporado?

Não. O seu servidor pede um token de sessão de curta duração para o ID do seu próprio usuário com o client ID e o secret da configuração, e o seu front-end inicializa a incorporação com esse token.

Posso esconder partes do criador dos meus usuários?

Sim. Cada configuração de incorporação escolhe quais painéis ficam visíveis: chat com IA, prévia, árvore de arquivos, terminal, publicar e exportar. Ela também define tema, logo, a marca powered-by, projetos por usuário e mensagens de IA por sessão.

Como os webhooks são protegidos?

Cada entrega é assinada com HMAC-SHA256, incluindo uma versão que assina um timestamp junto com o corpo para você rejeitar replays. As entregas trazem um ID estável para eliminar duplicatas e são reenviadas até seis vezes ao longo de cerca de quinze horas.

A incorporação funciona no Safari?

O handshake com token de sessão evita depender dos cookies do próprio criador, mas os navegadores continuam restringindo o armazenamento de terceiros, então teste o fluxo completo nas versões atuais do Safari e do Firefox, inclusive em janelas privadas, antes do lançamento.

Isso é diferente da API da We.Inc?

A API permite construir a sua própria interface e provisionar clientes a partir dos seus sistemas. A incorporação coloca o criador pronto dentro do seu produto. Muitas equipes usam a API para provisionar e a incorporação para editar.